This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

Series of articles

Android Enterprise-level Combat – Interface -6(End)

It is not easy to create, please move other platforms not entered in accordance with the rules of the agreement.

preface

Yesterday I promised my fans to write a style selection interface, so here is the sixth article in this series, which is relatively simple.

The following is the main content of this article

First, look at the effect achieved

Ii. Preparation before implementation

1. Contents of dimens. XML file (same file as in the first case)

No more words, please help yourself in the first chapter

2. Contents of ids. XML file (this case is available)

    <item type="id" name="fl_tag_style_left"/>
    <item type="id" name="tv_select_left"/>
    <item type="id" name="tv_tag_style_left_is_use"/>
    <item type="id" name="fl_tag_style_right"/>
    <item type="id" name="tv_select_right"/>
    <item type="id" name="tv_tag_style_right_is_use"/>
Copy the code

3. Colors. XML file contents (this case is available)

    <color name="jimeng_set_bg">#ffeeeeee</color>
Copy the code

4. Shape_tag_style.xml file contents (this case is available)

<? xml version="1.0" encoding="utf-8"? > <shape android:shape="rectangle"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="2.0 dip" />
    <stroke android:width="2.0 dip" android:color="#FA37F9" />
</shape>
Copy the code

Three, implementation,

Take a single example

<LinearLayout
            android:layout_width="0.0 dip"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:orientation="vertical">

            <FrameLayout
                android:id="@id/fl_tag_style_left"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/shape_tag_style">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:paddingBottom="2.0 dip"
                    android:src="@drawable/pic_falls_left" />

                <ImageView
                    android:id="@id/tv_select_left"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center|right"
                    android:src="@drawable/pic_selected" />
            </FrameLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10.0 dip"
                android:text="Waterfall Flow"
                android:textColor="#ff333333"
                android:textSize="16.0 dip" />

            <TextView
                android:id="@id/tv_tag_style_left_is_use"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5.0 dip"
                android:text="In use"
                android:textColor="#FA37F9"
                android:textSize="12.0 dip" />
        </LinearLayout>
Copy the code

The renderings are as follows:

4. The source code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/jimeng_set_bg"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15.0 dip"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0.0 dip"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:orientation="vertical">

            <FrameLayout
                android:id="@id/fl_tag_style_left"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/shape_tag_style">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:paddingBottom="2.0 dip"
                    android:src="@drawable/pic_falls_left" />

                <ImageView
                    android:id="@id/tv_select_left"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center|right"
                    android:src="@drawable/pic_selected" />
            </FrameLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10.0 dip"
                android:text="Waterfall Flow"
                android:textColor="#ff333333"
                android:textSize="16.0 dip" />

            <TextView
                android:id="@id/tv_tag_style_left_is_use"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5.0 dip"
                android:text="In use"
                android:textColor="#FA37F9"
                android:textSize="12.0 dip" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0.0 dip"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:orientation="vertical">

            <FrameLayout
                android:id="@id/fl_tag_style_right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:paddingBottom="2.0 dip"
                    android:src="@drawable/pic_falls_right" />

                <ImageView
                    android:id="@id/tv_select_right"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center|right"
                    android:src="@drawable/pic_selected"
                    android:visibility="invisible" />
            </FrameLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10.0 dip"
                android:text="Nine squares"
                android:textColor="#ff333333"
                android:textSize="16.0 dip" />

            <TextView
                android:id="@id/tv_tag_style_right_is_use"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5.0 dip"
                android:text="In use"
                android:textColor="#FA37F9"
                android:textSize="12.0 dip"
                android:visibility="invisible" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
Copy the code

Invisible/Visible can be made to the corresponding view in the file referencing the layout.

instructions

Big guys, the last article of this series, first of all, this code is really decompiled dachang APP after I according to their own ideas sorted out, don’t say what title does not conform to, the title is not tall, I also don’t know, naming, layout of what should be a large factory specification, ConstraintLayout is used in many applications, but it is not reconfigurable as fast. I spent a lot of time collecting more than 20 articles of this kind and sorted out many common layouts in the APP, both large and small. To 14 about the layout of what is also rewritten to ConstraintLayout, thinking about slowly, but since every day is big guy said, that certainly this type of article is not very good again……