自定义组合控件以及UI的动态添加

最新推荐文章于 2020-04-26 16:56:47 发布
最新推荐文章于 2020-04-26 16:56:47 发布
阅读量2.2k 收藏 2
点赞数 2
分类专栏： 自定义View之组合 文章标签： 控件 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jxq1994/article/details/59520001
版权

很多时候我们所需要的控件不是简单的TextView、EditText、Button能够做到的，比如这个 这里写图片描述。

其实上面这个控件很简单对吧，我们可以用shape来完成：

1.新建一个drawble文件

在res-drawable下新建一个circle.xml,root-element为shape：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="@color/colorAccent" ></solid>
    <!--<size android:height="10dp " android:width="10dp"></size>-->

</shape>

布局文件activity_second.xml :

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    <TextView
        android:id="@+id/textName1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textViewOne"
        android:textColor="@color/colorAccent"/>
        </LinearLayout>

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

    <TextView
        android:id="@+id/radio1"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_marginLeft="15dp"
        android:background="@drawable/circle" />

    <TextView
        android:id="@+id/line1"
        android:layout_width="50dp"
        android:layout_height="1dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
        android:background="@color/colorAccent"/>
        </LinearLayout>

</LinearLayout>

这样子我们就得到了图片上那样的控件，然后我们需要做的是将这个控件组合起来以便于我们对其进行复用。

2.自定义组合控件

创建一个java类MyCustomerOrder，继承LinearLayout，实现三个构造函数，并创建一个initView方法，在Oncreate()中调用，在initView方法中添加布局文件

MyCustomerOrder.java:

public class CustomerOrder  extends LinearLayout{
    private TextView topText,circle,line;
    public CustomerOrder(Context context) {
        super(context);
    }

    public CustomerOrder(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomerOrder(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void initView() {
        View view = View.inflate(getContext(),R.layout.activity_view,this);
        topText = (TextView) view.findViewById(R.id.topText);
        circle = (TextView) view.findViewById(R.id.circle);
        line = (TextView) view.findViewById(R.id.line);
    }

}

3.添加自定义控件

最后我们只需要在main.xml文件中添加我们的自定义控件即可：

 <com.example.iworker.myview.MyCustomerOrder
        android:id="@+id/order1"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        </com.example.iworker.myview.MyCustomerOrder>

4.装载自定义控件

最后在main文件中获得自定义控件并调用initView（）方法载入布局即可：

MainActivity.java:

 ...
 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        customerOrder = (CustomerOrder) findViewById(R.id.custom);
        customerOrder.initView();
    }

这样我们就完成了我们自定义的一个控件。

4.动态添加UI

那么怎么动态添加UI呢，我们的目标是完成这个图片：

这里写图片描述
复制三个这样的控件，水平排列；
那么我们需要添加一个数组来存储三个控件，并用一个for循环来添加所需要的其他控件：

CustomerOrder.java:

public class CustomerOrder  extends LinearLayout{
    private TextView topText,circle,line;
    private String[] titles;
    public CustomerOrder(Context context) {
        super(context);

//水平排列方法
setOrientation(HORIZONTAL);

    }

    public CustomerOrder(Context context, AttributeSet attrs) {
        super(context, attrs);
        setOrientation(HORIZONTAL);
    }

    public CustomerOrder(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOrientation(HORIZONTAL);
    }

    public void init(String[] titles){
        this.titles = titles;
        initView();
    }
    public void initView() {
        if(titles.length>0&&titles!=null){
            for(int i = 0;i<titles.length;i++){
                View view = View.inflate(getContext(),R.layout.activity_view,null);
                topText = (TextView) view.findViewById(R.id.topText);
                circle = (TextView) view.findViewById(R.id.circle);
                line = (TextView) view.findViewById(R.id.line);

 //添加控件方法               
 addView(view,LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
            }
        }

    }

}

然后我们只需要在MainActivity中定义含有若干个对象的String数组，这里我只定义三个：

MainActivity.java:

public class MainActivity extends AppCompatActivity {

 private String[] mTitles = new String[]{"hehe","haha","xixi"};
 ...
  protected void onCreate(Bundle savedInstanceState) {
...
  //调用init（）      
  customerOrder.init(mTitles);
    }
}

这样我们就可以灵活的添加控件啦，数量由我们自己决定。

再复杂一点

如果我们需要其中的一个控件的属性改变，比如颜色，我们该怎么做？我们先将文字改变一下：

在MainActivity.java中定义String数组
private String[] mTitles = new String[]{"已发送","配送中","配送完毕"};

在CustomerOrder.java中，将数组传入initView（）中

public void init(String[] titles){
        this.titles = titles;
        initView(titles);
    }

修改initView()方法

   ...             topText.setText(mTitles[i]);

因为我们需要修改的是圆点的颜色、文字颜色和线条颜色，还有一个是第几个控件；因此我们先将它们定义一下，在设置对应方法：

CustomerOrder.java:

public class CustomerOrder  extends LinearLayout{
...
private int currentView;//当前位置
    private int circleColor;//圆点颜色
    private int text;//文字
    private int myTextColor;//文字颜色
    private int lineColor;//线条颜色
    ...
    //设置对应方法
    /**
     * 设置当前布局位置
     * @param currentProcess
     */
    public void setCurrentProcess(int currentProcess) {
        this.currentView = currentProcess;
        //获得当前布局的子View
        View  view = getChildAt(currentProcess);

        TextView titleTextView = (TextView) view.findViewById(R.id.topText);
        titleTextView.setTextColor(getResources().getColor(myTextColor));

        TextView circleTextView = (TextView) view.findViewById(R.id.circle);
        circleTextView.setBackground(getResources().getDrawable(circleColor));

        TextView lineTextView = (TextView) view.findViewById(R.id.line);
        lineTextView.setTextColor(getResources().getColor(lineColor));
        //lineTextView.setVisibility(lineVisible);

//        textView.setVisibility(GONE);
    }

    /**
     * 设置圆点颜色
     * @param circleColor
     * @return
     */
    public CustomerOrder setCircleColor(int circleColor){
        this.circleColor = circleColor;
        return this;
    }

    /**
     * 设置文字颜色
     * @param textColor
     * @return
     */
    public CustomerOrder setTextColor(int textColor){
        this.myTextColor = textColor;
        return this;
    }

    /**
     * 设置文字
     * @param text
     * @return
     */
    public CustomerOrder setText(int text){
        this.text = text;
        return  this;
    }

    /**
     * 设置线条颜色
     * @param lineColor
     * @return
     */
    public CustomerOrder setLineColor(int lineColor){
        this.lineColor = lineColor;
        return this;
    }

然后我们只需要在MainActivity.java文件中调用上面的方法即可随意更改颜色：

 customerOrder.setTextColor(R.color.green);
        customerOrder.setCircleColor(R.drawable.circle3);
        customerOrder.setLineColor(R.color.green);
        customerOrder.setCurrentProcess(2);

如果我们要隐藏掉最后一个控件的线条则可在Customer.java的initView(String[])方法中修改：

public void initView(String[] mTitles) {
            ...

  if(i==mTitles.length-1){                    line.setVisibility(GONE);
                }
                ...
}

这里写图片描述

贴近现实

更现实的情况确实这样，在第二个圆点变化的时候，第一个圆点就已经变化了，在第三个圆点变化时，前两个也已经变了颜色，因此我们这样补充：

在 设置当前布局位置方法setCurrentProcess（）中加入一个循环：

CustomerOrder.java

 public void setCurrentProcess(int currentProcess) {

        for(int i = 0;i<=currentProcess;i++){
         //获得当前布局的子View
            View  view = getChildAt(i);
            TextView titleTextView = (TextView) view.findViewById(R.id.topText);
            titleTextView.setTextColor(getResources().getColor(myTextColor));
//        titleTextView.setText(getResources().getText(text));

            TextView circleTextView = (TextView) view.findViewById(R.id.circle);
            circleTextView.setBackground(getResources().getDrawable(circleColor));

            TextView lineTextView = (TextView) view.findViewById(R.id.line);
            lineTextView.setBackgroundColor(getResources().getColor(lineColor));
        }

这里写图片描述

优化代码

你以为这就完了吗？并没有。对于数组而言，事实上List会更好。

jxq1994
关注
专栏目录
安卓 动态添加控件，自定义的或代码实现
06-12
动态添加控件，自定义的或代码实现，适合学习
动态加载UI
weixin_30570101的博客
02-27 111
1、增加头文件 　　#include<QtUiTools> 2、新建一个.qrc文件addui.qrc，描述.ui文件的路径： 　　<!DOCTYPE RCC><RCC version="1.0"> 　　<qresource> 　　　　<file>forms/third.ui</file> 　　</qreso...
JavaScript动态添加和删除控件
深蓝忧郁的技术空间
09-01 4903
方法一: input type="button" onClick="add();" value="添加控件">div id="a">div>script>var num=0;function add()...{alert(window.document.getElementById("a").innerHTML);window.document.getElementById("a").
动态添加控件
a1003434346的博客
04-06 1717
自定义控件需要的构造函数: 自定义一个派生自View或ViewGroup类的控件时,必须实现构造函数,默认有3个构造函数,不同的场景引入,需要实现不同的构造函数,否则会报inflate错误 三个构造函数: public 类名(Context context){ super(context); } public 类名(Context context,AttributeSet attrs){...
自定义组合控件
04-11
本文将深入探讨自定义组合控件的概念、实现方式以及它如何体现XML布局思想，同时通过分析提供的文件`MyCustomeItem`来解析其具体实践。 一、自定义组合控件概述 自定义组合控件，顾名思义，是将多个基本控件（如...
Android自定义控件之自定义组合控件（三）
09-01
oid:layout_height="45...通过封装常见的UI元素，自定义组合控件可以作为基础组件在整个项目中复用，降低了开发和维护的成本。在实际开发中，我们应该尽可能地利用自定义组合控件来优化我们的代码结构，提升开发体验。
实例讲解Android应用中自定义组合控件的方法
09-02
在Android应用开发中，自定义组合控件是提高应用程序可定制性和灵活性的重要手段。通过组合已有的基础控件，如Button和ImageView，开发者可以创建出更符合应用需求的UI元素。本文将通过一个实例，详细讲解如何在...
Android自定义组合控件
09-26
本文将深入探讨如何根据【标题】"Android自定义组合控件"和【描述】中的内容，结合【标签】"android 自定义控件 组合控件 自定义属性"，来创建一个自己的自定义组合控件。 首先，我们要明白什么是自定义控件。在...
向窗体中动态添加控件
07-01
向窗体中动态添加控件 向窗体中动态添加控件 向窗体中动态添加控件向窗体中动态添加控件
动态添加自定义控件至Panel
11-20
实现功能： 动态添加自定义控件至Panel，每行添加个数可控，达到指定个数后自动进行换行； 其中包含只能输入字母或者数字以及退格键(Backspace)的自定义控件
5-2 动态添加控件
weixin_38887666的博客
05-07 89
（图一）（图二）如果要显示之前添加的超链接，则应将超链接写在PageLoad事件中； 下面我们将添加Link的过程设置为自定义函数：
动态添加控件及删除
cn_514的博客
05-22 3303
方法1：        int i = 0;        List&lt;PhoneTextBox&gt; list = new List&lt;PhoneTextBox&gt;();              private void btnAdd_Click(object sender, EventArgs e)        {                       if (i &g...
一些常用的ui框架组合
jamst
10-09 657
amaze semantic element + vue layui https://weui.io ————————————— Vue 全家桶：vue2 + vuex + vue-router + webpack 网络请求：axios 页面相应式框架：element-ui 
ES6 表单验证：vee-validate...
安卓ui设计之动态添加view
Ian22l的博客
04-26 252
在ui设计当中，有时候需要动态添加动态view。这时候安卓提供了一些动态添加view的接口。注意addView是相对ViewGropu来说的，单独的View没有addView方法。 addView(View child) // child：添加的View addView(View child, int index) // index：添加的View的索引 addView(View chil...
如何动态的创建控件以及添加事件处理函数，并使事件能够传递自定义参数
vesard的博客
08-11 702
在写winform的时候遇到一些需求，需要根据数据库的查询结果动态创建控件。这里以Label控件为例进行演示： Label a = new Label();//动态创建 a.Name = n.ToString();//为动态生成的控件更改属性 a.ForeColor = Color.Blue;//颜色 a.Text = "测试";//文本 a.Location = new Point(10,10)...
Android自定义组合控件实战与学习笔记
自定义组合控件的关键在于将相似结构的UI元素打包成一个可重用的单元。例如，这里的示例中，作者以一个条目布局为例，每个条目由一个ImageView显示图片、一个TextView显示文字，并且这些元素的位置和尺寸都是预设的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值