如何制作划分视图并在选择时显示颜色的布局？

Question

enter image description hereI want to make a layout which has different options and when we select it it should look colored. Like below:

我试过类似的方法，但无法获得相同的效果。我尝试使用选择器在单击时将其显示为彩色，但单击后颜色消失。它只是在我们按下视图时显示。

请帮忙..我想制作与图片相同的布局。

 <LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="05dp"
    android:layout_marginRight="05dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/shape">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/shape"
        android:clickable="true">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="@string/pickupbak"
        android:id="@+id/textView47"
        android:layout_gravity="center"
        android:textAlignment="gravity"
        android:gravity="center_vertical"
        android:layout_marginLeft="05dp"
        android:layout_marginRight="05dp" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/shape">
    <TextView
        android:layout_width="89dp"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="@string/pickupbox"
        android:id="@+id/textView48"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:layout_marginLeft="05dp"
        android:layout_marginRight="05dp" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/shape">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="@string/engkelbak"
        android:id="@+id/textView49"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:layout_marginLeft="05dp"
        android:layout_marginRight="05dp" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/shape">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="@string/engkelbox"
        android:id="@+id/textView50"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:layout_marginLeft="05dp"
        android:layout_marginRight="05dp" />
        </LinearLayout>
</LinearLayout>
</LinearLayout>

选择器

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:drawable="@android:drawable/list_selector_background" />
</selector>

Answer 1

正如我对 3 个标签所做的评论中所讨论的：我正在分享你的代码：

对于线性布局：可绘制背景：bg_home_buttons.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/blue"/>
    <stroke android:width="@dimen/stroke_width" android:color="@color/blue" />
    <corners android:radius="@dimen/five"/>
</shape>

对于左按钮：（可绘制文件）home_button_left.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <!--<stroke android:width="@dimen/stroke_width" android:color="@color/facebook" />-->
    <corners android:topLeftRadius="@dimen/five" android:bottomLeftRadius="@dimen/five"/>
</shape>

对于右键：（可绘制文件）home_button_right.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <!--<stroke android:width="@dimen/stroke_width" android:color="@color/facebook" />-->
    <corners android:topRightRadius="@dimen/five" android:bottomRightRadius="@dimen/five"/>
</shape>

XML 文件线性布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/ten"
    android:background="@drawable/bg_home_buttons"
    android:orientation="horizontal"
    android:padding="1dp">

    <TextView
        android:id="@+id/tv_pick_up_bak"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:paddingBottom="@dimen/five"
        android:paddingTop="@dimen/five"
        android:text="@string/add_property"
        android:textColor="@android:color/white"
        android:textSize="@dimen/fifteen_sp" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@color/blue" />

    <TextView
        android:id="@+id/tv_pick_box"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/white"
        android:gravity="center"
        android:paddingBottom="@dimen/five"
        android:paddingTop="@dimen/five"
        android:text="@string/my_property"
        android:textColor="@color/blue"
        android:textSize="@dimen/fifteen_sp" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@color/blue" />

    <TextView
        android:id="@+id/tv_engkel_box"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/home_button_right"
        android:gravity="center"
        android:paddingBottom="@dimen/five"
        android:paddingTop="@dimen/five"
        android:text="@string/portfolio"
        android:textColor="@color/blue"
        android:textSize="@dimen/fifteen_sp"
        android:typeface="sans" />

</LinearLayout>

按钮更改功能：

Context context;
 public void changeBackground(int id) {
        if (id == tvPickBag.getId()) {
            tvPickBag.setTextColor(context.getResources().getColor(R.color.white));
            tvPickBox.setTextColor(context.getResources().getColor(R.color.blue));
            tvEngKelBox.setTextColor(context.getResources().getColor(R.color.blue));
            tvPickBag.setBackgroundColor(context.getResources().getColor(android.R.color.transparent));
            tvEngKelBox.setBackground(context.getDrawable( R.drawable.home_button_right));
            tvPickBox.setBackgroundColor(context.getResources().getColor(R.color.white));
        } else if (id == tvEngKelBox.getId()) {
            tvPickBag.setBackground(context.getDrawable(R.drawable.home_button_left));
            tvEngKelBox.setBackgroundColor(context.getResources().getColor(android.R.color.transparent));
            tvPickBox.setBackgroundColor(context.getResources().getColor(R.color.white));
            tvPickBag.setTextColor(context.getResources().getColor(R.color.blue));
            tvPickBox.setTextColor(context.getResources().getColor(R.color.blue));
            tvEngKelBox.setTextColor(context.getResources().getColor(R.color.white));
        } else if (id == tvPickBox.getId()) {
            tvPickBag.setBackground(context.getDrawable( R.drawable.home_button_left));
            tvEngKelBox.setBackground(context.getDrawable( R.drawable.home_button_right));
            tvPickBox.setBackgroundColor(context.getResources().getColor(android.R.color.transparent));
            tvPickBag.setTextColor(context.getResources().getColor(R.color.blue));
            tvPickBox.setTextColor(context.getResources().getColor(R.color.white));
            tvEngKelBox.setTextColor(context.getResources().getColor(R.color.blue));
        }
    }

在 changeBackground 方法中，您应该从 onClickListener 传递点击按钮 ID 的 ID。

维度：

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>

    <!-- Per the design guidelines, navigation drawers should be between 240dp and 320dp:
         https://developer.android.com/design/patterns/navigation-drawer.html -->
    <dimen name="navigation_drawer_width">300dp</dimen>
    <dimen name="padding_text_view">10dp</dimen>
    <dimen name="border">1dp</dimen>
    <dimen name="ten">10dp</dimen>
    <dimen name="five">5dp</dimen>
    <dimen name="radius_circle_indicator">8dp</dimen>
    <dimen name="width_button_sign_up">300dp</dimen> -2px match_parent
    <dimen name="size_sign_up_text">13sp</dimen>  15
    <dimen name="padding_tutorial_text">20dp</dimen>
    <dimen name="padding_text_view_right">30dp</dimen>
    <dimen name="fifteen_sp">14sp</dimen> 15
    <dimen name="eighteen_sp">15sp</dimen> 18
    <dimen name="twenty_sp">17sp</dimen> 20
    <dimen name="two">2dp</dimen>
    <dimen name="one">0.5dp</dimen>
    <dimen name="sixteen_sp">16sp</dimen>
    <dimen name="twenty_five_sp">22sp</dimen> 25
    <dimen name="margin_">30dp</dimen>
    <dimen name="map_padding">100dp</dimen>
    <dimen name="stroke_width">1dp</dimen>
    <dimen name="loader_size">80dp</dimen>
    <dimen name="loading_width">5dp</dimen>
    <dimen name="loader_layout_size">300dp</dimen>
    <dimen name="fifteen">15dp</dimen>
    <dimen name="fourty_sp">30sp</dimen> 40
    <dimen name="thirty_sp">20sp</dimen> 20
    <dimen name="height_chart">230dp</dimen>
    <dimen name="height_chart_minus">200dp</dimen>
    <dimen name="width_chart">400dp</dimen>
    <dimen name="size_sales_history">11sp</dimen> 13
    <dimen name="size_text_house_price">22sp</dimen> 25
    <dimen name="twenty">20dp</dimen>
    <dimen name="fifty">100dp</dimen>
    <dimen name="top_margin_sales_history_button">30dp</dimen>
    <dimen name="ten_minus">-10dp</dimen>
    <dimen name="size_marker_text">11sp</dimen>
    <dimen name="profile_image_size">120dp</dimen>
    <dimen name="invite_icon_size">18sp</dimen>
    <dimen name="fourty">40dp</dimen>
    <dimen name="minimum_height_listview">200dp</dimen>
    <dimen name="map_size">300dp</dimen>
    <dimen name="bar_text_size">11sp</dimen>
    <dimen name="margin_bar_text">7dp</dimen>
    <dimen name="five_hundred">800dp</dimen>
    <dimen name="padding_text_view_fourteen">14dp</dimen>
    <dimen name="eight">8dp</dimen>
    <dimen name="thirteen">13dp</dimen>
    <dimen name="three">3dp</dimen>
    <dimen name="seven">7dp</dimen>
    <dimen name="margin_home_buttons">14dp</dimen>
    <dimen name="margin_home_buttons_four">4dp</dimen>
    <dimen name="space_to_change_since">3dp</dimen>

    <dimen name="half_divider">0.5dp</dimen>
    <dimen name="size_sales_history_box_width" >60dp</dimen>
    <dimen name="height_line_thick">@dimen/two</dimen>
    <dimen name="height_buttons_social">40dp</dimen>
    <dimen name="four">4dp</dimen>
    <dimen name="actionbar_text_size">15sp</dimen>
    <dimen name="actionbar_symbol_size">20sp</dimen>
    <dimen name="actionbar_text_size_title">15sp</dimen>

Color.xml

<resources>
    <color name="light_purple">#ca0571</color>
    <color name="dark_blue">#203142</color>

    <color name="facebook">#3b589a</color>
    <color name="twitter">#4799ef</color>
    <color name="google">#d44837</color>d34836
    <color name="white">#FFFFFF</color>
    <color name="green">#98c269</color>
    <color name="gray">#f6f0ee</color>
    <color name="blue">#56a6db</color>
    <color name="orange">#f26522</color>
    <color name="gray_dark">#b8000000</color>
    <color name="divider_color">#717171</color>

    <color name="menu_bg_color">#444f5b</color>
    <color name="email">#ca0571</color>
</resources

OnClikLister: 像这样传递视图 onClicklistener 的 id： changeBackground(tvPickBag.getId()) 像这样。

Answer 2

您要查找的内容在 iOS 上称为分段控件，这是 android 上来自 github https://github.com/hoang8f/android-segmented-control

的类似控件

如何制作划分视图并在选择时显示颜色的布局？

How to make layout which divides views and shows colored when selected?

java

layout

android

colors

selector