系列文章目錄

Android企業級實戰-界面篇-6

計蒙創作不易，未入駐的其他平臺搬運請按協議規則搬運，

前言

昨天答應粉絲寫一個樣式選擇的界面，所以出此系列第六篇文章，這篇文章相對比較簡單

以下是本篇文章正文內容

一、先看看實作的效果

二、實作前準備

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即可，

總結

歡迎留言，有疑問可與計蒙進行私聊（看到訊息就回），如希望計蒙更新某界面文章也可私聊，我們下篇文章見，