1. 编程号首页

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

编程小号 • • 未分类

Android案例手册 – 仅一个文件的展开收缩LinearLayout👉关于作者 👉前提 这是小空坚持写的Android新手向系列，欢迎品尝。 新手（√√√） 大佬（√） 👉实践过程 Hello，大家好，小空这两天又开始造Android方面的文章啦，哈哈，总是在Andr

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

👉关于作者

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

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

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

👉前提

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

新手（√√√）

大佬（√）

👉实践过程

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

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

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

可展开的LinearLayout-仅一个文件复制即用.gif

默认展示两个子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)

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

今天的文章Android案例手册 – 仅一个文件的展开收缩LinearLayout分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/18007.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注