三色梯页面效果

例：

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

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

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

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

主方法类：

public class MainActivity extends AppCompatActivity {
    private AddSubtractView mAsv;
    private TrapezoidView mTv;
    private ViewGroup.MarginLayoutParams layoutParams;
    private int width;
    private int height;
    private int num = 1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //获取屏幕的宽高
        WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);
        width = wm.getDefaultDisplay().getWidth();
        height = wm.getDefaultDisplay().getHeight();
        initView();
        initData();
    }

    private void initData() {
        mTv = (TrapezoidView) findViewById(R.id.tv);

        layoutParams = new ViewGroup.MarginLayoutParams(width / 3, 50);
        layoutParams.leftMargin = 5;
        layoutParams.rightMargin = 5;
        layoutParams.topMargin = 5;
        layoutParams.bottomMargin = 5;
        for (int i = 0; i < num; i++) {
            TextView textView = new TextView(this);
            textView.setText(i + 1 + "");
            textView.setGravity(Gravity.CENTER);
            textView.setTextColor(Color.BLACK);
            mTv.addView(textView, layoutParams);
        }

        mTv.setOnItemClickListener(new TrapezoidView.OnItemClickListener() {
            @Override
            public void onItemClick(View view) {
                TextView tv = (TextView) view;
                String string = tv.getText().toString();
                Toast.makeText(MainActivity.this, string, Toast.LENGTH_SHORT).show();
                Intent intent = new Intent(MainActivity.this,Main2Activity.class);
                intent.putExtra("page",string);
                startActivity(intent);
            }
            @Override
            public void onItemLongClick(View view) {
                mTv.deleteItem(view);
            }
        });
    }

    private void initView() {
        mAsv = (AddSubtractView) findViewById(R.id.asv);
        mAsv.setmOnAddSubtractListener(new AddSubtractView.OnAddSubtractListener() {
            @Override
            public void onClickAdd(View view) {
                num++;
                TextView textView = mTv.addItem(num);
                mTv.addView(textView, layoutParams);
            }
        });
    }
}

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">
    <com.example.day_0530_view.DiYi.AddSubtractView
        android:id="@+id/asv"
        android:layout_width="match_parent"
        android:layout_height="50dp">
    </com.example.day_0530_view.DiYi.AddSubtractView>

    <com.example.day_0530_view.DiYi.TrapezoidView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.example.day_0530_view.DiYi.TrapezoidView>
</LinearLayout>

AddSubtractView   类：

public class AddSubtractView extends LinearLayout {
    private TextView tv_num;
    public AddSubtractView(Context context) {
        this(context,null);
    }
    public AddSubtractView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }
    public AddSubtractView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }
    private void initView(Context context) {
        View inflate = View.inflate(context, R.layout.add_subtract, this);
        TextView tv_add = (TextView) inflate.findViewById(R.id.add);
        tv_add.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mOnAddSubtractListener != null){
                    mOnAddSubtractListener.onClickAdd(v);
                }
            }
        });
    }
    //设置接口
    public interface OnAddSubtractListener{
        void onClickAdd(View view);
    }
    //声明接口
    private OnAddSubtractListener mOnAddSubtractListener;
    //提供方法
    public void setmOnAddSubtractListener(OnAddSubtractListener listener){
        this.mOnAddSubtractListener = listener;
    }
}

add_subtract  布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/num"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="三色梯"
        android:textSize="20dp" />
    <TextView
        android:id="@+id/add"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#00FFFF"
        android:gravity="center"
        android:text="＋"
        android:textSize="20dp" />
</LinearLayout>

TrapezoidView 类:

public class TrapezoidView extends ViewGroup {
    private View childAt;
    private int startWidth;
    private int startHeight;
    public TrapezoidView(Context context) {
        this(context, null);
    }
    public TrapezoidView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public TrapezoidView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        MarginLayoutParams params = null;
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        //开始处理wrap_content,如果一个子元素都没有，就设置为0
        if (getChildCount() == 0) {
            setMeasuredDimension(0, 0);
        } else if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
            //ViewGroup，宽，高都是wrap_content，根据我们的需求，宽度是子控件的宽度，高度则是所有子控件的总和
            View childOne = getChildAt(0);
            params = (MarginLayoutParams) childOne.getLayoutParams();
            int childWidth = childOne.getMeasuredWidth();
            int childHeight = childOne.getMeasuredHeight();
            setMeasuredDimension(childWidth + params.leftMargin + params.rightMargin,
                    childHeight * getChildCount() + params.topMargin + params.bottomMargin);
        } else if (widthMode == MeasureSpec.AT_MOST) {
            //ViewGroup的宽度为wrap_content,则高度不需要管，宽度还是自控件的宽度
            View childOne = getChildAt(0);
            params = (MarginLayoutParams) childOne.getLayoutParams();
            int childWidth = childOne.getMeasuredWidth();
            setMeasuredDimension(childWidth + params.leftMargin + params.rightMargin, heightSize);
        } else if (heightMode == MeasureSpec.AT_MOST) {
            //ViewGroup的高度为wrap_content,则宽度不需要管，高度为子View的高度和
            View childOne = getChildAt(0);
            params = (MarginLayoutParams) childOne.getLayoutParams();
            int childHeight = childOne.getMeasuredHeight();
            setMeasuredDimension(widthSize, childHeight * getChildCount() + params.topMargin + params.bottomMargin);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        startWidth = 0;
        startHeight = 0;
        //获取屏幕的宽度
        int width = getWidth();
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            childAt = getChildAt(i);
            if (i % 3 == 0) {
                childAt.setBackgroundColor(Color.RED);
            }
            if (i % 3 == 1) {
                childAt.setBackgroundColor(Color.GREEN);
            }
            if (i % 3 == 2) {
                childAt.setBackgroundColor(Color.BLUE);
            }
            childAt.layout(startWidth, startHeight, startWidth + childAt.getMeasuredWidth(), startHeight + childAt.getMeasuredHeight());
            startWidth += childAt.getMeasuredWidth();
            startHeight += childAt.getMeasuredHeight();
            if (startWidth >= width) {
                startWidth = 0;
            }
        }
        childAt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mOnItemClickListener != null){
                    mOnItemClickListener.onItemClick(v);
                }
            }
        });
        childAt.setOnLongClickListener(new OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                if(mOnItemClickListener != null){
                    mOnItemClickListener.onItemLongClick(v);
                }
                return true;
            }
        });
    }

    //添加条目
    public TextView addItem(int num) {
        TextView textView = new TextView(getContext());
        textView.setText(num +"");
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.BLACK);
        setAnim(textView);
        return textView;
    }

    private void setAnim(TextView textView) {
        ObjectAnimator translationY = ObjectAnimator.ofFloat(textView, "translationY", new float[]{0f, startHeight, 0});
        ObjectAnimator translationX = ObjectAnimator.ofFloat(textView, "translationX", new float[]{0f, startWidth, 0});
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(translationY, translationX);
        animatorSet.setDuration(5000);
        animatorSet.start();
    }

    //删除条目
    public void deleteItem(View view) {
        removeView(view);
    }

    public interface OnItemClickListener{
        void onItemClick(View view);
        void onItemLongClick(View view);
    }
    private OnItemClickListener mOnItemClickListener;
    public void setOnItemClickListener(OnItemClickListener listener){
        this.mOnItemClickListener = listener;
    }
}

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

猜你喜欢