android----------------------- Composite Control Page for Custom Controls

The previous section describes the custom properties of custom controls, addresses: https://my.oschina.net/zhangqie/blog/1805970

This post is mainly about custom control combinations to improve layout reuse

 

Benefits of using custom composite controls?

In project development, we often encounter many similar or identical layouts, such as the title bar of APP. We can use custom combination controls to improve development efficiency, reduce development costs, and facilitate expansion.

 

There are other ways, of course, such as the include tag

 

1: Title bar layout file

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

    <ImageView
        android:id="@+id/title_tab_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:background="@null"
        android:minHeight="45dp"
        android:textSize="14sp"
        />

    <TextView
        android:id="@+id/title_tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:maxLines="1"
        android:textSize="17sp" />

    <Button
        android:id="@+id/title_tab_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="7dp"
        android:background="@null"
        android:minHeight="45dp"
        android:minWidth="45dp"
        android:textSize="14sp" />
</merge>

2: Property file

 <declare-styleable name="TopTabToolView">
        <attr name="tab_background_color" format="color"/>
        <attr name="left_tab_visible" format="boolean"/>
        <attr name="left_tab_drawable" format="reference|integer"/>
        <attr name="title_text" format="string"/>
        <attr name="title_color" format="color"/>
        <attr name="right_tab_visible" format="boolean"/>
        <attr name="right_tab_text" format="string"/>
        <attr name="right_tab_text_color" format="color"/>
        <attr name="right_tab_drawable" format="reference|integer"/>
</declare-styleable>

3: Custom Controls

public class TopTabToolView extends RelativeLayout {

    private ImageView titleBarLeftImg;
    private Button titleBarRightBtn;
    private TextView titleBarTitle;

    public TopTabToolView(Context context) {
        super(context);
    }

    public TopTabToolView(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.tab_tool_layout,this,true);
        titleBarLeftImg = (ImageView)findViewById(R.id.title_tab_left);
        titleBarTitle = (TextView)findViewById(R.id.title_tab_title);
        titleBarRightBtn = (Button)findViewById(R.id.title_tab_right);

        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.TopTabToolView);
        if (typedArray != null){

            //Background Settings
            int titleBarBackGround = typedArray.getColor(R.styleable.TopTabToolView_tab_background_color, Color.WHITE);
            setBackgroundColor(titleBarBackGround);

            //---------------------------------------Left side of Title bar-------------------------------
            boolean leftImgVisible = typedArray.getBoolean(R.styleable.TopTabToolView_left_tab_visible,true);
            if (leftImgVisible){
                titleBarLeftImg.setVisibility(VISIBLE);
            }else {
                titleBarLeftImg.setVisibility(GONE);
            }
            //Set Icon
            int leftTabDrawble = typedArray.getResourceId(R.styleable.TopTabToolView_left_tab_drawable,-1);
            if (leftTabDrawble != -1){
                titleBarLeftImg.setImageResource(leftTabDrawble);
            }


            //-------------------------------------------------------------------
            String titleText = typedArray.getString(R.styleable.TopTabToolView_title_text);
            if (!TextUtils.isEmpty(titleText)){
                titleBarTitle.setText(titleText);
                //Set Font Color
                int titleTextColor = typedArray.getColor(R.styleable.TopTabToolView_title_color,Color.WHITE);
                titleBarTitle.setTextColor(titleTextColor);
            }



            //-------------------------------------------------------Right side of title bar
            boolean rightButtonVisible = typedArray.getBoolean(R.styleable.TopTabToolView_right_tab_visible,true);
            if (rightButtonVisible){
                titleBarRightBtn.setVisibility(VISIBLE);
            }else {
                titleBarRightBtn.setVisibility(INVISIBLE);
            }

            //Set Text
            String rightBtnText = typedArray.getString(R.styleable.TopTabToolView_right_tab_text);
            if (!TextUtils.isEmpty(rightBtnText)){
                titleBarRightBtn.setText(rightBtnText);
                int rightBtnTextColor = typedArray.getColor(R.styleable.TopTabToolView_right_tab_text_color,Color.WHITE);
                titleBarRightBtn.setTextColor(rightBtnTextColor);
            }

            //Set Icon
            int rightBtnDrawable = typedArray.getResourceId(R.styleable.TopTabToolView_right_tab_drawable,-1);
            if (rightBtnDrawable != -1){
                titleBarRightBtn.setCompoundDrawablesWithIntrinsicBounds(0,0,rightBtnDrawable,0);
            }

            typedArray.recycle();
        }
    }

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

    /**
     * Set Title
     * @param title
     */
    public void setTitle(String title){
        if (!TextUtils.isEmpty(title)){
            titleBarTitle.setText(title);
        }
    }

    /***
     * Left Click
     * @param onClickListener
     */
    public void setLeftOnClickListener(OnClickListener onClickListener){
        if (onClickListener != null){
            titleBarLeftImg.setOnClickListener(onClickListener);
        }
    }


    /***
     * Right Click
     * @param onClickListener
     */
    public void setRightOnClickListener(OnClickListener onClickListener){
        if (onClickListener != null){
            titleBarRightBtn.setOnClickListener(onClickListener);
        }
    }
}

Property file settings can also be modified through Java code, such as Title title

 

4:Activity Code

public class Demo3Activity extends AppCompatActivity {

    TopTabToolView topTabToolView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.demo3);
        initView();
    }

    private void initView(){
        topTabToolView = (TopTabToolView) findViewById(R.id.tab1);
        topTabToolView.setTitle("Code Setting Title");
        topTabToolView.setLeftOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        topTabToolView.setRightOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(Demo3Activity.this,"Close",Toast.LENGTH_LONG).show();
            }
        });
    }
}

Design sketch:

 

 

 

Source address: https://github.com/DickyQie/android-custom-control

Tags: Android xml encoding Java

Posted on Sun, 22 Mar 2020 09:58:06 -0700 by Foser