父布局角不可见，因为选择器重叠

问题描述 投票：3回答：2

我正在尝试使用具有2个textviews的舍入的linearlayoutlayout构建选项卡。

我想要以下输出

“在此处输入图像描述”

接下来发生的是什么

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9CUGprSy5wbmcifQ==” alt =“在此处输入图像描述”>

应用于textview的选择器被绘制在可绘制的父版面之上，因为这些角不可见。我无法在textview选择器中添加角，因为它将在每个textview中将所有4个角都变圆。

我还考虑过使用特定的角，即对每个textview进行成形，但是这将增加每个textview的可绘制对象的数量，这不是一种灵活的解决方案，将来我可能会选择使用更多选项卡。

[谁能建议一个通用的xml解决方案，以便我可以更改textviews的背景而不影响父级布局的角落吗？

我的代码布局

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:background="@drawable/layout_background"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/issue_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/tab_selector"
        android:fontFamily="@raw/roboto_medium"
        android:gravity="center_horizontal"
        android:padding="5dp"
        android:text="TAB 1" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#4c8bff" />

    <TextView
        android:id="@+id/activity_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/tab_selector"
        android:fontFamily="@raw/roboto_medium"
        android:gravity="center_horizontal"
        android:padding="5dp"
        android:text="TAB 2" />
</LinearLayout>

layout_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="rectangle" >

    <stroke android:width="1dp" android:color="#4c8bff"/>
    <corners android:radius="5dp" />
    <solid android:color="#FFFFFFFF" />

</shape>

tab_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/tab_selected"/>
 <!-- selected -->
    <item android:state_pressed="true" android:drawable="@drawable/tab_pressed"/>
 <!-- pressed -->
    <item android:state_focused="true" android:drawable="@drawable/tab_pressed"/>
 <!-- focused -->
    <item android:drawable="@drawable/tab_normal"/>
 <!-- default -->    
</selector>

tab_selected.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#4c8bff" />
</shape>
android android-layout textview android-tabs android-selector
2个回答
3
投票

更新的代码

创建tab_selected_left_corner.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#4c8bff" />
    <corners
       android:bottomLeftRadius="5dp"
       android:bottomRightRadius="0dp"
       android:topLeftRadius="5dp"
       android:topRightRadius="0dp" />
</shape>

创建tab_selected_right_corner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#4c8bff" />
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="5dp" />
</shape>

创建layout_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle" >

<stroke
    android:width="1dp"
    android:color="#4c8bff" />

<corners android:radius="5dp" />

<solid android:color="#FFFFFFFF" />

</shape>

您的主要xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:background="@drawable/layout_background"
    android:orientation="horizontal" >

<TextView
    android:id="@+id/issue_tab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:padding="5dp"
    android:text="TAB 1" />

<View
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:background="#4c8bff" />

<TextView
    android:id="@+id/activity_tab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:padding="5dp"
    android:text="TAB 2" />

</LinearLayout>

将其放入您的activity

issueTab.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            issueTab.setBackgroundResource(R.drawable.tab_selected_left_corner);
              activity_tab.setBackgroundResource(android.R.color.transparent);
        }
    });
    activity_tab.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
              issueTab.setBackgroundResource(android.R.color.transparent);
            activity_tab.setBackgroundResource(R.drawable.tab_selected_right_corner);
        }
    });

这对我有用。对您也希望。

0
投票

@@ Sulabh Gajjar-非常感谢您提供如此详细的答案。我想到了这种方法，但是我想知道是否有更好的方法，所以请将此作为我的最后选择。像您建议的那样，为左右选项卡创建了2个选择器，而不是创建新的可绘制对象，而是在选择器本身内部编写了形状，并创建了2个单独的文件来存储https://stackoverflow.com/a/12952591/1020809建议的不同拐角半径。目前它对我有用，但是如果有人提出一种更通用的方法，我将再等几天，如果没有人出现，我会将您的答案标记为接受。再次感谢...：）

使用您的方法，这是我使它运行的方式

布局

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="7dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="7dp"
            android:background="@drawable/custom_tab_background"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/issue_tab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/custom_tab_selector_left"
                android:fontFamily="@raw/roboto_bold"
                android:gravity="center_horizontal"
                android:padding="5dp"
                android:text="Issues"
                android:textAllCaps="true"
                android:textColor="@color/custom_tab_text_color_selector"
                android:textSize="14sp" />

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

            <TextView
                android:id="@+id/activity_tab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/custom_tab_selector_right"
                android:fontFamily="@raw/roboto_bold"
                android:gravity="center_horizontal"
                android:padding="5dp"
                android:text="Activities"
                android:textAllCaps="true"
                android:textColor="@color/custom_tab_text_color_selector"
                android:textSize="14sp" />
        </LinearLayout>

custom_tab_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="rectangle" >

    <stroke
        android:width="2dp"
        android:color="@color/custom_tab_selected" />

    <corners android:radius="5dp" />

    <solid android:color="#FFFFFFFF" />

    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />

</shape>

dimens.xml

  <dimen name="custom_tab_layout_radius">4dp</dimen>

custom_tab_selector_left.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@color/custom_tab_selected" />
            <corners android:bottomLeftRadius="@dimen/custom_left_tab_bottomLeftRadius" 
                android:bottomRightRadius="@dimen/custom_left_tab_bottomRightRadius" 
                android:topLeftRadius="@dimen/custom_left_tab_topLeftRadius" 
                android:topRightRadius="@dimen/custom_left_tab_topRightRadius" />
        </shape>
    </item>
    <!-- selected -->

    <item android:state_pressed="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@color/custom_tab_pressed" />
            <corners android:bottomLeftRadius="@dimen/custom_left_tab_bottomLeftRadius" 
                android:bottomRightRadius="@dimen/custom_left_tab_bottomRightRadius" 
                android:topLeftRadius="@dimen/custom_left_tab_topLeftRadius" 
                android:topRightRadius="@dimen/custom_left_tab_topRightRadius" />
        </shape>
    </item>
    <!-- pressed -->

    <item android:state_focused="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@color/custom_tab_pressed" />
            <corners android:bottomLeftRadius="@dimen/custom_left_tab_bottomLeftRadius" 
                android:bottomRightRadius="@dimen/custom_left_tab_bottomRightRadius" 
                android:topLeftRadius="@dimen/custom_left_tab_topLeftRadius" 
                android:topRightRadius="@dimen/custom_left_tab_topRightRadius" />
        </shape>       
    </item>
    <!-- focused -->

    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@color/custom_tab_normal" />
            <corners android:bottomLeftRadius="@dimen/custom_left_tab_bottomLeftRadius" 
                android:bottomRightRadius="@dimen/custom_left_tab_bottomRightRadius" 
                android:topLeftRadius="@dimen/custom_left_tab_topLeftRadius" 
                android:topRightRadius="@dimen/custom_left_tab_topRightRadius" />
        </shape>
    </item>
    <!-- default -->

</selector>

/ res / values / custom_tab_corners.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- LEFTMOST TAB -->
    <dimen name="custom_left_tab_topLeftRadius">@dimen/custom_tab_layout_radius</dimen>
    <dimen name="custom_left_tab_bottomLeftRadius">0dp</dimen>
    <dimen name="custom_left_tab_topRightRadius">0dp</dimen>
    <dimen name="custom_left_tab_bottomRightRadius">@dimen/custom_tab_layout_radius</dimen>

    <!-- RIGHTMOST TAB -->
    <dimen name="custom_right_tab_topLeftRadius">0dp</dimen>
    <dimen name="custom_right_tab_bottomLeftRadius">@dimen/custom_tab_layout_radius</dimen>
    <dimen name="custom_right_tab_topRightRadius">@dimen/custom_tab_layout_radius</dimen>
    <dimen name="custom_right_tab_bottomRightRadius">0dp</dimen>    
</resources>

/ res / values-v12 / custom_tab_corners.xml

<resources>
    <!-- LEFTMOST TAB -->
    <dimen name="custom_left_tab_topLeftRadius">@dimen/custom_tab_layout_radius</dimen>
    <dimen name="custom_left_tab_bottomLeftRadius">@dimen/custom_tab_layout_radius</dimen>
    <dimen name="custom_left_tab_topRightRadius">0dp</dimen>
    <dimen name="custom_left_tab_bottomRightRadius">0dp</dimen>

    <!-- RIGHTMOST TAB -->
    <dimen name="custom_right_tab_topLeftRadius">0dp</dimen>
    <dimen name="custom_right_tab_bottomLeftRadius">0dp</dimen>
    <dimen name="custom_right_tab_topRightRadius">@dimen/custom_tab_layout_radius</dimen>
    <dimen name="custom_right_tab_bottomRightRadius">@dimen/custom_tab_layout_radius</dimen>    
</resources>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.