Android企业级实战-界面篇-6

系列文章目录

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

总结

欢迎留言，有疑问可与计蒙进行私聊（看到消息就回），如希望计蒙更新某界面文章也可私聊，我们下篇文章见。