folding-cell-android使用教程

最新推荐文章于 2024-08-10 07:32:58 发布

小小本科生

最新推荐文章于 2024-08-10 07:32:58 发布

阅读量1.1k

点赞数 1

分类专栏： Android开发文章标签： foldingCell 折叠自定义控件炫酷 android

本文链接：https://blog.csdn.net/huangxin388/article/details/84479500

版权

Android开发专栏收录该内容

8 篇文章 2 订阅

订阅专栏

由于项目需要最近了解了一下folding-cell-android控件，效果还是蛮好看的。PC端屏幕比较大，表格中的各个表项或者员工(物品)的各种属性信息可以横向纵向排列在一起，便于用户查看。而手机屏幕比较小，横向排列摆不下，如果全部纵向堆叠，界面简直不忍直视。由此可见，借助于下面的folding-cell-android控件可以获得多么良好的展示效果。

这篇文章主要是为了以后用到此控件的时候方便查看，写得肯定不够细致，还望小伙伴们见谅。

github地址：https://github.com/Ramotion/folding-cell-android

首先通过依赖安装相应的包。

implementation 'com.ramotion.foldingcell:folding-cell:1.2.2'

紧接着就可以在布局文件中引入FoldingCell控件了，有如下几个需要注意的地方：

FoldingCell控件中只能有两个子元素，第一个为内容视图(展开才出现)，第二个为标题视图(闭合才出现)
内容视图或标题视图的高度必须设置为android:layout_height="wrap_content",经过实验设置为match_parent也可以
内容视图或标题视图内部均可包含任意数量的子视图
内容视图的总高度必须大于两倍标题视图高度
必须隐藏内容视图 android:visibility="gone"

一、简单使用

xml代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".FifthActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:orientation="vertical">

        <Button
            android:id="@+id/toggle_instant_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="无动画展开" />

        <Button
            android:id="@+id/toggle_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="有动画展开" />

    </LinearLayout>

    <com.ramotion.foldingcell.FoldingCell
        android:id="@+id/folding_cell"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/cell_content_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:visibility="gone">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="@android:color/holo_green_dark"
                android:gravity="center"
                android:text="第一部分内容" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="@color/colorAccent"
                android:gravity="center"
                android:text="第二部分内容"/>

        </LinearLayout>

        <FrameLayout
            android:id="@+id/cell_title_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="@android:color/holo_blue_dark"
                android:gravity="center"
                android:text="Title view" />

        </FrameLayout>

    </com.ramotion.foldingcell.FoldingCell>

</LinearLayout>

java代码：

package com.tjut.ddms;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.ramotion.foldingcell.FoldingCell;

public class FifthActivity extends AppCompatActivity {

    private FoldingCell fc;
    private Button btnToggle;
    private Button btnToggleInstant;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fifth);

        fc = findViewById(R.id.folding_cell);
        btnToggle = findViewById(R.id.toggle_btn);
        btnToggleInstant = findViewById(R.id.toggle_instant_btn);
        btnToggle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                fc.toggle(true);//跳过动画,即无动画
            }
        });
        btnToggleInstant.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                fc.toggle(true);//不跳过动画动画
            }
        });
    }
}

二、列表方式使用

1.编写内容视图cell_content.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:visibility="gone">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <ImageView
            android:id="@+id/head_portrait"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginRight="16dp"
            android:src="@drawable/avatar"/>

        <TextView
            android:id="@+id/user_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/head_portrait"
            android:layout_toEndOf="@+id/head_portrait"
            android:text="Admin"
            android:textColor="#000000"
            android:textSize="20sp"/>

        <TextView
            android:id="@+id/name_info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/head_portrait"
            android:layout_toEndOf="@+id/head_portrait"
            android:layout_below="@+id/user_name"
            android:text="姓名："/>

        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/name_info"
            android:layout_toEndOf="@+id/name_info"
            android:layout_below="@+id/user_name"
            android:text="张三"/>



    </RelativeLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/colorBitGray"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <LinearLayout
                android:layout_marginBottom="8dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="员工编码:"/>

                <TextView
                    android:id="@+id/employee_code"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="001"/>


            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginBottom="8dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="所属角色:"/>

                <TextView
                    android:id="@+id/employee_role"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="admin"/>


            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="备注:"/>

                <TextView
                    android:id="@+id/remark"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="系统管理员"/>


            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

2.编写标题视图cell_title.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        android:id="@+id/title_index"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="16dp"
        android:text="1"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="8dp"
        android:text="用户名:"/>

    <TextView
        android:id="@+id/title_user_name"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="Admin"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/arrow_down"
        android:layout_gravity="right"/>

</LinearLayout>

3.编写ListView子视图cell.xml,通过include标签将内容视图和标题视图包含进来

<?xml version="1.0" encoding="utf-8"?>
<com.ramotion.foldingcell.FoldingCell
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:folding-cell="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    folding-cell:additionalFlipsCount="0"
    folding-cell:animationDuration="1300"
    folding-cell:backSideColor="#f4f0ff"
    folding-cell:cameraHeight="30">

    <!-- CONTENT (UNFOLDED) LAYOUT (MUST BE AT LEAST 2x times BIGGER than content layout bellow)-->
    <include layout="@layout/cell_content" />

    <!-- TITLE (FOLDED) LAYOUT (MUST BE AT LEAST 2x times SMALLER than content layout above) -->
    <include layout="@layout/cell_title" />


</com.ramotion.foldingcell.FoldingCell>

其中：

序号	属性名	描述
1	additionalFlipsCount	第一次（主要）翻转后执行的翻转次数，默认为0(自动选择)
2	animationDuration	表示动画时间，单位毫秒
3	backSideColor	翻页时的背景色
4	cameraHeight	表示相机高度，它控制3D效果的水平(深度)

4.编写ListView的适配器UserFoldingCellAdapter和大家平时编写的适配器没什么不同

package com.tjut.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.ramotion.foldingcell.FoldingCell;
import com.tjut.bean.EmployeeBean;
import com.tjut.ssms.R;

import java.util.List;

public class UserFoldingCellAdapter extends BaseAdapter {
    private Context mContext;
    private List<EmployeeBean> data;

    public UserFoldingCellAdapter(Context mContext, List<EmployeeBean> data) {
        this.mContext = mContext;
        this.data = data;
    }

    @Override
    public int getCount() {
        return data.size();
    }

    @Override
    public Object getItem(int i) {
        return data.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View convertView, ViewGroup viewGroup) {
        FoldingCell view = (FoldingCell) convertView;
        ViewHolder holder = null;
        if(view == null) {
            view = (FoldingCell) LayoutInflater.from(mContext).inflate(R.layout.cell,viewGroup,false);
            holder = new ViewHolder();
            holder.txtTitleUserName = view.findViewById(R.id.title_user_name);
            holder.imgHeadPortrait = view.findViewById(R.id.head_portrait);
            holder.txtUserName = view.findViewById(R.id.user_name);
            holder.txtName = view.findViewById(R.id.name);
            holder.txtEmployCode = view.findViewById(R.id.employee_code);
            holder.txtEmployRole = view.findViewById(R.id.employee_role);
            holder.txtRemark = view.findViewById(R.id.remark);
            view.setTag(holder);
        } else {
            holder = (ViewHolder)view.getTag();
        }
        holder.txtTitleUserName.setText(data.get(i).getUserName());
        holder.imgHeadPortrait.setImageResource(R.drawable.avatar);
        holder.txtUserName.setText(data.get(i).getUserName());
        holder.txtName.setText(data.get(i).getName());
        holder.txtEmployCode.setText(data.get(i).getEmployeeCode());
        holder.txtEmployRole.setText(data.get(i).getEmployRole());
        holder.txtRemark.setText(data.get(i).getRemark());
        return view;
    }
    class ViewHolder {
        TextView txtTitleUserName;
        ImageView imgHeadPortrait;
        TextView txtUserName;
        TextView txtName;
        TextView txtEmployCode;
        TextView txtEmployRole;
        TextView txtRemark;
    }
}

其中用到的EmployBean

package com.tjut.bean;

public class EmployeeBean {
    private String userName;
    private String name;
    private int employeePortrait;
    private String employeeCode;
    private String employRole;
    private String remark;

    public EmployeeBean(String userName, String name, int employeePortrait, String employeeCode, String employRole, String remark) {
        this.userName = userName;
        this.name = name;
        this.employeePortrait = employeePortrait;
        this.employeeCode = employeeCode;
        this.employRole = employRole;
        this.remark = remark;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getEmployeePortrait() {
        return employeePortrait;
    }

    public void setEmployeePortrait(int employeePortrait) {
        this.employeePortrait = employeePortrait;
    }

    public String getEmployeeCode() {
        return employeeCode;
    }

    public void setEmployeeCode(String employeeCode) {
        this.employeeCode = employeeCode;
    }

    public String getEmployRole() {
        return employRole;
    }

    public void setEmployRole(String employRole) {
        this.employRole = employRole;
    }

    public String getRemark() {
        return remark;
    }

    public void setRemark(String remark) {
        this.remark = remark;
    }
}

我是将这个ListView放在一个Fragment中的，如果需要将其放在Activity中只需要粘贴核心代码即可

5.编写主布局fragment_user_manager.xml

    <ListView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/user_list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:divider="@android:color/transparent"
        android:dividerHeight="10dp"
        android:padding="16dp"
        android:scrollbars="none"
        tools:context="com.tjut.fragment.UserManagerFragment"
        />

5.编写主要逻辑代码UserManagerFragment

package com.tjut.fragment;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListView;

import com.ramotion.foldingcell.FoldingCell;
import com.tjut.adapter.UserFoldingCellAdapter;
import com.tjut.bean.EmployeeBean;
import com.tjut.ssms.R;

import java.util.ArrayList;
import java.util.List;


public class UserManagerFragment extends Fragment {

    private ListView userFoldingCellList;
    private UserFoldingCellAdapter adapter;
    private List<EmployeeBean> data;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_user_manager, container, false);
        userFoldingCellList = view.findViewById(R.id.user_list_view);
        initData();
        adapter = new UserFoldingCellAdapter(getActivity(),data);
        userFoldingCellList.setAdapter(adapter);
        initEvent();
        return view;
    }

    private void initEvent() {
        userFoldingCellList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                ((FoldingCell) view).toggle(false);
            }
        });
    }

    private void initData() {
        EmployeeBean bean;
        data = new ArrayList<>();
        bean = new EmployeeBean("admin","张三",
                R.drawable.avatar,"001","admin","系统管理员");
        data.add(bean);
        bean = new EmployeeBean("test","李四",
                R.drawable.avatar,"002","engineer","工程师");
        data.add(bean);
    }
}

最终效果是下面这样(为了压缩图片大小，速度放快了点)