Android案例手册 - 仅一个文件的展开收缩LinearLayout

👉关于作者

众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣！！！

专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）

欢迎关注公众号【空名先生】获取更多资源和交流！

👉前提

这是小空坚持写的Android新手向系列，欢迎品尝。

新手（√√√）

大佬（√）

👉实践过程

Hello，大家好，小空这两天又开始造Android方面的文章啦，哈哈，总是在Android和Unity中来回横跳。

前两天我们刚讲解了LinearLayout，那么今天我们自定义一个可展开收缩的LinearLayout。

仅一个文件（Java版或Kotlin版），随时复制随时用。
先看效果图

默认展示两个子item，当点击“显示更多”的时候展开所有的子View，当点击“收起内容”的时候除了前两个其他的都隐藏。

😜使用

我们先来看看使用方式：

<cn.phototocartoonstudy.ExpandableLinearLayout
    android:id="@+id/idExpandableLinearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="4dp"
        android:text="芝麻粒儿" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="4dp"
        android:text="https://juejin.cn/user/4265760844943479" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="4dp"
        android:text="CSDN" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="4dp"
        android:text="https://zhima.blog.csdn.net/" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="4dp"
        android:text="Android/Unity技术" />
</cn.phototocartoonstudy.ExpandableLinearLayout>

直接布局中用即可，或者动态代码添加：

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_framelayout);
    ExpandableLinearLayout idExpandableLinearLayout=findViewById(R.id.idExpandableLinearLayout);
    for (int i = 0; i < 4; i++) {
        TextView  txtViewTip = new TextView(this);
        txtViewTip.setText("芝麻粒儿添加更多内容"+i);
        LinearLayout.LayoutParams layoutParamsBottomTxt = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        txtViewTip.setLayoutParams(layoutParamsBottomTxt);
        idExpandableLinearLayout.addView(txtViewTip);
    }
}

😜实现

说完了使用，我们就来说说实现，前面学完LinearLayout后知道该控件使用了wrap_content，如果子View使用隐藏GONE的形式，则高度自动变化，页面布局中和该控件对其的其他控件也会自动变化。

所以，当子View的个数小于设置的默认个数，则不用添加底部，如果子View个数大于默认显示个数，则在最后动态添加一个View，当点击展开和隐藏的时候，其他多余的控件进行GONE和VISIBLE的控制即可。

我们再为控件增加点其他方法：

1. 修改当隐藏的时候默认展示的条目

2. 可修改展开和收起的控件文本

3. 可修改展开和收起控件的字体大小和颜色

4. 其他功能自己看着加吧

public void outUseMethodChangeDefaultItemCount(int intDefaultItemCount) {
    this.intDefaultItemCount = intDefaultItemCount;
}
public void outUseMethodChangeExpandText(String strExpandText) {
    this.strExpandText = strExpandText;
}
public void outUseMethodChangeHideText(String strHideText) {
    this.strHideText = strHideText;
}
public void outUseMethodChangeExpandHideTextSize(float fontTextSize) {
    this.fontTextSize = fontTextSize;
}
public void outUseMethodChangeExpandHideTextColor(@ColorInt int intTextColor) {
    this.intTextColor = intTextColor;
}

Java版

/**
 * Created by akitaka on 2022-08-11.
 *
 * @author akitaka
 * @filename ExpandableLinearLayout
 */

public class JavaExpandableLinearLayout extends LinearLayout implements View.OnClickListener {

    private TextView txtViewTip;
    /**
     * 是否是展开状态，默认是隐藏
     */
    private boolean isExpand = false;
    private boolean boolHasBottom = false;

    private int intDefaultItemCount = 2;
    /**
     * 待展开显示的文字
     */
    private String strExpandText = "显示更多";
    /**
     * 待隐藏显示的文字
     */
    private String strHideText = "收起内容";
    private float fontTextSize;
    private int intTextColor;

    public void outUseMethodChangeDefaultItemCount(int intDefaultItemCount) {
        this.intDefaultItemCount = intDefaultItemCount;
    }

    public void outUseMethodChangeExpandText(String strExpandText) {
        this.strExpandText = strExpandText;
    }

    public void outUseMethodChangeHideText(String strHideText) {
        this.strHideText = strHideText;
    }
    public void outUseMethodChangeExpandHideTextSize(float fontTextSize) {
        this.fontTextSize = fontTextSize;
    }
    public void outUseMethodChangeExpandHideTextColor(@ColorInt int intTextColor) {
        this.intTextColor = intTextColor;
    }
    public JavaExpandableLinearLayout(Context context) {
        this(context, null);
    }

    public JavaExpandableLinearLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public JavaExpandableLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //设置垂直方向
        setOrientation(VERTICAL);
    }

    @Override
    public void setOrientation(int orientation) {
        if (LinearLayout.HORIZONTAL == orientation) {
            throw new IllegalArgumentException("ExpandableLinearLayout只支持垂直布局");
        }
        super.setOrientation(orientation);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int childCount = getChildCount();
        justToAddBottom(childCount);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }


    /**
     * 判断是否要添加底部
     */
    private void justToAddBottom(int childCount) {
        if (childCount > intDefaultItemCount && !boolHasBottom) {
            boolHasBottom = true;
            //要使用默认底部,并且还没有底部
            LinearLayout linearLayoutBottom = new LinearLayout(getContext());
            LinearLayout.LayoutParams layoutParamsBottom = new LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            linearLayoutBottom.setLayoutParams(layoutParamsBottom);
            linearLayoutBottom.setGravity(Gravity.CENTER);
            txtViewTip = new TextView(getContext());
            txtViewTip.setText("展开更多");
            txtViewTip.setTextSize(fontTextSize);
            txtViewTip.setTextColor(intTextColor);
            LinearLayout.LayoutParams layoutParamsBottomTxt = new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            txtViewTip.setLayoutParams(layoutParamsBottomTxt);
            //设置个边距
            layoutParamsBottomTxt.setMargins(0, 10, 0, 10);
            linearLayoutBottom.addView(txtViewTip);
            linearLayoutBottom.setOnClickListener(this);
            //添加底部
            addView(linearLayoutBottom);
            hide();
            Log.e("TAG", "justToAddBottom: zou l zhe ");
        }
    }

    /**
     * 刷新UI
     */
    private void refreshView(View view) {
        int childCount = getChildCount();
        if (childCount > intDefaultItemCount) {
            if (childCount - intDefaultItemCount == 1) {
                //刚超过默认，判断是否要添加底部
                justToAddBottom(childCount);
            }
            //大于默认数目的先隐藏
            view.setVisibility(GONE);
        }
    }

    /**
     * 展开
     */
    private void expand() {
        for (int i = intDefaultItemCount; i < getChildCount(); i++) {
            //从默认显示条目位置以下的都显示出来
            View view = getChildAt(i);
            view.setVisibility(VISIBLE);
        }
    }

    /**
     * 收起
     */
    private void hide() {
        int endIndex = getChildCount() - 1;
        for (int i = intDefaultItemCount; i < endIndex; i++) {
            //从默认显示条目位置以下的都隐藏
            View view = getChildAt(i);
            view.setVisibility(GONE);
        }
    }

    @Override
    public void onClick(View v) {
        outUseMethodToggle();
    }

    /**
     * 外部也可调用 展开或关闭
     */
    public void outUseMethodToggle() {
        if (isExpand) {
            hide();
            txtViewTip.setText(strExpandText);
        } else {
            expand();
            txtViewTip.setText(strHideText);
        }
        isExpand = !isExpand;
    }

    /**
     * 外部可随时添加子view
     */
    public void outUseMethodAddItem(View view) {
        int childCount = getChildCount();
        //插在底部之前
        addView(view, childCount - 1);
        refreshView(view);
    }
}

Kotlin版

/**
 * Created by akitaka on 2022-08-11.
 * @author akitaka
 * @filename KotlinExpandableLinearLayout
 */
class KotlinExpandableLinearLayout :LinearLayout, View.OnClickListener {
    private var txtViewTip: TextView? = null
    constructor(context: Context?) :this(context,null)
    constructor(context: Context?, attrs: AttributeSet?) :this(context,attrs,0)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
    init {
        //设置垂直方向
        orientation = VERTICAL
    }
    /**
     * 是否是展开状态，默认是隐藏
     */
    private var isExpand = false

    private var intDefaultItemCount = 2
    private var boolHasBottom = false

    /**
     * 待展开显示的文字
     */
    private var strExpandText = "显示更多"

    /**
     * 待隐藏显示的文字
     */
    private var strHideText = "收起内容"
    private var fontTextSize = 0f
    private var intTextColor = 0

    fun outUseMethodChangeDefaultItemCount(intDefaultItemCount: Int) {
        this.intDefaultItemCount = intDefaultItemCount
    }

    fun outUseMethodChangeExpandText(strExpandText: String) {
        this.strExpandText = strExpandText
    }

    fun outUseMethodChangeHideText(strHideText: String) {
        this.strHideText = strHideText
    }

    fun outUseMethodChangeExpandHideTextSize(fontTextSize: Float) {
        this.fontTextSize = fontTextSize
    }

    fun outUseMethodChangeExpandHideTextColor(@ColorInt intTextColor: Int) {
        this.intTextColor = intTextColor
    }

    override fun setOrientation(orientation: Int) {
        require(HORIZONTAL != orientation) { "ExpandableLinearLayout只支持垂直布局" }
        super.setOrientation(orientation)
    }


    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val childCount = childCount
        justToAddBottom(childCount)
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    }


    /**
     * 判断是否要添加底部
     */
    private fun justToAddBottom(childCount: Int) {
        if (childCount > intDefaultItemCount && !boolHasBottom) {
            boolHasBottom = true
            //要使用默认底部,并且还没有底部
            val linearLayoutBottom = LinearLayout(context)
            val layoutParamsBottom = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
            linearLayoutBottom.layoutParams = layoutParamsBottom
            linearLayoutBottom.gravity = Gravity.CENTER
            txtViewTip = TextView(context)
            txtViewTip!!.text = "展开更多"
            txtViewTip!!.textSize = fontTextSize
            txtViewTip!!.setTextColor(intTextColor)
            val layoutParamsBottomTxt = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
            txtViewTip!!.layoutParams = layoutParamsBottomTxt
            //设置个边距
            layoutParamsBottomTxt.setMargins(0, 10, 0, 10)
            linearLayoutBottom.addView(txtViewTip)
            linearLayoutBottom.setOnClickListener(this)
            //添加底部
            addView(linearLayoutBottom)
            hide()
        }
    }

    /**
     * 刷新UI
     */
    private fun refreshView(view: View) {
        val childCount = childCount
        if (childCount > intDefaultItemCount) {
            if (childCount - intDefaultItemCount == 1) {
                //刚超过默认，判断是否要添加底部
                justToAddBottom(childCount)
            }
            //大于默认数目的先隐藏
            view.setVisibility(GONE)
        }
    }

    /**
     * 展开
     */
    private fun expand() {
        for (i in intDefaultItemCount until childCount) {
            //从默认显示条目位置以下的都显示出来
            val view: View = getChildAt(i)
            view.setVisibility(VISIBLE)
        }
    }

    /**
     * 收起
     */
    private fun hide() {
        val endIndex = childCount - 1
        for (i in intDefaultItemCount until endIndex) {
            //从默认显示条目位置以下的都隐藏
            val view: View = getChildAt(i)
            view.setVisibility(GONE)
        }
    }

    override fun onClick(v: View?) {
        outUseMethodToggle()
    }

    /**
     * 外部也可调用 展开或关闭
     */
    fun outUseMethodToggle() {
        if (isExpand) {
            hide()
            txtViewTip!!.text = strExpandText
        } else {
            expand()
            txtViewTip!!.text = strHideText
        }
        isExpand = !isExpand
    }

    /**
     * 外部可随时添加子view
     */
    fun outUseMethodAddItem(view: View) {
        val childCount = childCount
        //插在底部之前
        addView(view, childCount - 1)
        refreshView(view)
    }
}

📢作者：小空和小芝中的小空

📢转载说明-务必注明来源：芝麻粒儿 的个人主页 - 专栏 - 掘金 (juejin.cn)

📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。