这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战

系列文章目录

Android企业级实战-界面篇-6(end)

计蒙创作不易，未入驻的其他平台搬运请按协议规则搬运。

前言

昨天答应粉丝写一个样式选择的界面，所以出此系列第六篇文章，这篇文章相对比较简单（大佬还请看完说明后再评论）

请添加图片描述

以下是本篇文章正文内容

一、先看看实现的效果

请添加图片描述

二、实现前准备

1.dimens.xml文件内容（与第一个案例为同文件）

不占字了，请于第一篇自取

2.ids.xml文件内容（此案例可用）

    <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"/>

3.colors.xml文件内容（此案例可用）

    <color name="jimeng_set_bg">#ffeeeeee</color>

4.shape_tag_style.xml文件内容（此案例可用）

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

三、实现

以单个为例

<LinearLayout
            android:layout_width="0.0dip"
            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.0dip"
                    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.0dip"
                android:text="瀑布流"
                android:textColor="#ff333333"
                android:textSize="16.0dip" />

            <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.0dip"
                android:text="使用中"
                android:textColor="#FA37F9"
                android:textSize="12.0dip" />
        </LinearLayout>

效果图如下：请添加图片描述

四.源码

<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.0dip"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0.0dip"
            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.0dip"
                    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.0dip"
                android:text="瀑布流"
                android:textColor="#ff333333"
                android:textSize="16.0dip" />

            <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.0dip"
                android:text="使用中"
                android:textColor="#FA37F9"
                android:textSize="12.0dip" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0.0dip"
            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.0dip"
                    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.0dip"
                android:text="九宫格"
                android:textColor="#ff333333"
                android:textSize="16.0dip" />

            <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.0dip"
                android:text="使用中"
                android:textColor="#FA37F9"
                android:textSize="12.0dip"
                android:visibility="invisible" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

切换效果在引用布局的文件中对相应view进行invisible/visible即可。

说明

大佬们，此系列最后一篇了，首先呀，这个代码真的是反编译大厂APP后本人按照自己想法整理出来的，别说啥标题不符合，标题高不高大上俺也不知道，命名,布局什么的应该是某大厂规范了，而且某大厂APP很多布局确实改成了ConstraintLayout，但是重构的速度也没这么快好吧...之前是花了很多时间屯了将近20多篇这种文章，大大小小的也整理了APP中很多能够通用的布局。到14篇左右的布局啥的也是改写成了ConstraintLayout，想着慢慢发的，但是既然天天被大佬说，那肯定这种类型文章也不太好再出现了......