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

系列文章目录

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

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

文章目录

系列文章目录
前言
一、先看看实现的效果
二、实现前准备

1.dimens.xml文件内容（与第一个案例为同文件）
2.ids.xml文件内容（此案例可用）
3.colors.xml文件内容（此案例可用）
4.shape_tag_style.xml文件内容（此案例可用）

三、实现
四.源码
总结

前言

昨天答应粉丝写一个样式选择的界面，所以出此系列第六篇文章，这篇文章相对比较简单

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

以下是本篇文章正文内容

一、先看看实现的效果

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

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

二、实现前准备

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>

三、实现

以单个为例

<LinearLayoutandroid:layout_width="0.0dip"android:layout_height="wrap_content"android:layout_weight="1.0"android:orientation="vertical"><FrameLayoutandroid: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"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:paddingBottom="2.0dip"android:src="@drawable/pic_falls_left" /><ImageViewandroid: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><TextViewandroid: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" /><TextViewandroid: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>

效果图如下：

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

四.源码

<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"><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_marginTop="15.0dip"android:orientation="horizontal"><LinearLayoutandroid:layout_width="0.0dip"android:layout_height="wrap_content"android:layout_weight="1.0"android:orientation="vertical"><FrameLayoutandroid: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"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:paddingBottom="2.0dip"android:src="@drawable/pic_falls_left" /><ImageViewandroid: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><TextViewandroid: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" /><TextViewandroid: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><LinearLayoutandroid:layout_width="0.0dip"android:layout_height="wrap_content"android:layout_weight="1.0"android:orientation="vertical"><FrameLayoutandroid:id="@id/fl_tag_style_right"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:paddingBottom="2.0dip"android:src="@drawable/pic_falls_right" /><ImageViewandroid: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><TextViewandroid: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" /><TextViewandroid: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即可。