完成如下三色梯页面效果

例：

A.自定义ViewGroup的方式完成如图一三色梯页面效果，第一条红色，第二条绿色，第三条蓝色，依次循环，台阶上显示第几条台阶数，每台阶梯子占控件宽度的1/3，垂直方向依次向下添加

B.当点击标题栏右上方的添加按钮时，新的台阶添加到三色梯的下方，并显示添加的条数

C.当点击标题栏左上方的删除按钮时，从底部依次删除【删除添加的时候，使用属性动画】

D.为自定义三色梯条目提供长按和点击事件，长按删除选中条目，点击则跳转新页面

主方法类：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private MyView myView;
    private Button btn_add;//点击添加条目
    private Button btn_delete;
    int i=0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myView = findViewById(R.id.myView);

        btn_add = findViewById(R.id.btn_add);//找控件
        btn_add.setOnClickListener(this);//添加点击事件

        btn_delete = findViewById(R.id.btn_delete);
    }

    /**
     * 右上角点击添加
     */
    @Override
    public void onClick(View v) {
        i++;
        final TextView text= new TextView(this);
        text.setWidth(250);
        text.setHeight(100);
        text.setText(" 这是添加的条目 "+i);
        text.setTextColor(Color.WHITE);//字体颜色白色
        if((i+1)%3==0){
            text.setBackgroundColor(Color.GREEN);//背景颜色绿色2
        }else if ((i+1)%3==1){
            text.setBackgroundColor(Color.BLUE);//背景颜色蓝色3
        }else if ((i+1)%3==2){
            text.setBackgroundColor(Color.RED);//背景颜色红色1
        }
        myView.addView(text);

        /**
         * 长按删除选中条目
         */
        text.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                //对话框
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setTitle("删除条目");
                builder.setMessage("请确认是否要删除选中的条目");
                builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        myView.removeView(text);
                    }
                });
                builder.setNegativeButton("取消",null);
                AlertDialog alertDialog = builder.create();
                alertDialog.show();
                return true;
            }
        });

        /**
         * 左上角点击删除
         */
        btn_delete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                myView.removeView(text);
            }
        });

        /**
         * 点击条目跳转新的页面
         */
        text.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, Main2Activity.class);
                startActivity(intent);
            }
        });
    }
}

activity_main  布局：

<?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=".MainActivity">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/btn_delete"
            android:layout_weight="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="-"/>
        <TextView
            android:layout_weight="6"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="24dp"
            android:gravity="center"
            android:text="三色梯"/>
        <Button
            android:id="@+id/btn_add"
            android:layout_weight="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="+"/>
    </LinearLayout>

    <com.example.day_0530_view.MyView
        android:id="@+id/myView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.example.day_0530_view.MyView>

</LinearLayout>

MyView  类：

public class MyView extends ViewGroup {
    public MyView(Context context) {
        this(context,null);
    }

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

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measureChildren(widthMeasureSpec,heightMeasureSpec);

    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int count = getChildCount();
        int startWidth = 0;
        int startHeight = 0;
        for (int i=0; i<count; i++){
            View v = getChildAt(i);
            v.layout(startWidth,startHeight,startWidth+v.getMeasuredWidth(),startHeight+v.getMeasuredHeight());
            if ((i+1)%3==0) {
                startWidth=0;
            }else {
                startWidth += v.getMeasuredWidth();
            }
            startHeight += v.getMeasuredHeight();
        }
    }
}

添加权限：
<application>在这个控件中加入参数（需要跳转的页面）

<activity android:name=".Main2Activity"></activity>
</application>

点击跳转的新页面主类：

public class Main2Activity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
    }
}

activity_main2

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context=".Main2Activity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="11111111111111" />

</RelativeLayout>

完成如下三色梯页面效果

猜你喜欢