完成如下三色梯页面效果（升级版）

例：

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

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

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

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

主方法类：

public class MainActivity extends AppCompatActivity {
    private ThreeColorView threeColorView;
    private int count = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        threeColorView = findViewById(R.id.threecolorview);
    }

    /**
     * 添加view
     * @param view
     */
    public void add(View view) {
        count++;
        int width = AppUtil.screenWidth(this);
        TextView textView = new TextView(this);
        textView.setText("这是条目"+count);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(getResources().getColor(R.color.white));//字体颜色白色
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView,"translationX",(width-width/3),0);
        objectAnimator.setDuration(3000);
        objectAnimator.start();
        if (count==1||count==4||count==7){
            textView.setBackgroundColor(getResources().getColor(R.color.colorAccent));
        }else{
            textView.setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));
        }
        threeColorView.addView(textView);
        //得到view的属性参数
        ViewGroup.LayoutParams params = textView.getLayoutParams();
        params.width = width/3;
        params.height = 70;
        textView.setLayoutParams(params);
    }
}

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=".DiYi.MainActivity">
    <Button
        android:layout_gravity="center_horizontal"
        android:id="@+id/add"
        android:onClick="add"
        android:text="添加"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <com.example.day_0530_view.DiYi.ThreeColorView
        android:id="@+id/threecolorview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.example.day_0530_view.DiYi.ThreeColorView>
</LinearLayout>

AppUtil 类：

public class AppUtil {
    /**
     * @param context
     * @return 屏幕宽度
     */
    public static int screenWidth(Context context){
        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        return  metrics.widthPixels;
    }
}

ThreeColorView  类：

public class ThreeColorView extends ViewGroup {
    public ThreeColorView(Context context) {
        super(context);
    }
    public ThreeColorView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public ThreeColorView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    /**
     * 把此view的最终的宽度和高度定下来
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int totalHeight = 0;//此控件的高度
        int totalWidth = 0;//此控件的宽度
        //得到子view数量
        int child = getChildCount();
        if (child > 0) {
            for (int i = 0; i < child; i++) {//遍历子控件
                View view = getChildAt(i);//得到此容器所有的子view
                totalHeight += view.getMeasuredHeight();
                measureChild(view,widthMeasureSpec,heightMeasureSpec);
//                view.measure(widthMeasureSpec, heightMeasureSpec);
            }
        }
        totalWidth = AppUtil.screenWidth(getContext());
        System.out.println("width:"+totalWidth);
        System.out.println("height:"+totalHeight);

        //设置宽度和高度给当前view，通过下面这个方法
        setMeasuredDimension(totalWidth, totalHeight);
    }
    @Override
    protected void onLayout(boolean bo, int left, int top, int right, int bottom) {

        int l = 0;
        int t = 0;
        int r = 0;
        int b = 0;

        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View view = getChildAt(i);//得到每一个view的对象
            view.layout(l, t, l + view.getMeasuredWidth(), t + view.getMeasuredHeight());
            l += view.getMeasuredWidth();
            System.out.println("llll:"+l);
            t += view.getMeasuredHeight();
            if (l+view.getMeasuredWidth()>AppUtil.screenWidth(getContext())){
                l = 0;
            }
//            if (AppUtil.screenWidth(getContext()) - l < view.getMeasuredWidth()) {
//                l = 0;
//            }
            //点击事件
            final int finalI = i;
            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(getContext(), finalI +"：点击位置", Toast.LENGTH_SHORT).show();
//                    TextView textView = (TextView) view;
//                    Toast.makeText(getContext(), textView.getText().toString() +"文本", Toast.LENGTH_SHORT).show();
//                    Intent intent = new Intent(getContext(), MainActivity.class);
//                    intent.putExtra("id",textView.getText().toString());
//                    getContext().startActivity(intent);
                    Intent intent = new Intent(getContext(),Main2Activity.class);
                    getContext().startActivity(intent);

                }
            });

            view.setOnLongClickListener(new OnLongClickListener() {
                @Override
                public boolean onLongClick(View view) {
                    Toast.makeText(getContext(), finalI +"：长按位置", Toast.LENGTH_SHORT).show();
                    removeView(view);
                    return true;
                }
            });
        }
    }
}

添加权限：
<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>

完成如下三色梯页面效果（升级版）

猜你喜欢