Question

我使用TabLayout库中的新com.android.support:design。我想更改所选/未选定选项卡的背景。我查看了源代码，发现只有tabBackground属性可以更改所有选项卡颜色，并且不会控制选定的选项卡颜色。

如何控制选定/未选定的标签背景？

Answer 1

定义：

    <style name="AppTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabMaxWidth">@dimen/tab_max_width</item>
        <item name="tabIndicatorColor">?attr/colorAccent</item>
        <item name="tabIndicatorHeight">4dp</item>
        <item name="tabPaddingStart">6dp</item>
        <item name="tabPaddingEnd">6dp</item>
        <item name="tabBackground">?attr/selectableItemBackground</item>
        <item name="tabTextAppearance">@style/AppTabTextAppearance</item>
        <item name="tabSelectedTextColor">@color/range</item>
    </style>

    <!-- for text -->
    <style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">@color/orange</item>
        <item name="textAllCaps">false</item>
    </style>

应用

<android.support.design.widget.TabLayout style="@style/AppTabLayout" app:tabTextAppearance="@style/AppTabTextAppearance" android:layout_width="match_parent" .... />

Answer 2

如果您查看TabLayout.class，您会看到内部TabView.class标签的实际布局。它与isSelected属性的任何其他布局相同。选择选项卡也会对此产生影响，因此您需要做的就是创建选择器背景可绘制，如

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@color/tab_bg_selected"/>
<item android:drawable="@color/tab_bg_unselected"/></selector>

并将其附加到tabBackground属性，例如像XML一样

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@drawable/tab_bg"
            app:tabIndicatorHeight="4dp"/>

Answer 3

我读了How to Style ActionBar, tab background on selected tab并弄清楚要做什么。这是非常类似的问题，但我特别为TabLayout找到了很棒的解决方案：

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@color/tab_layout_color"
    app:tabIndicatorHeight="48dp"
    app:tabIndicatorColor="@color/selected_tab_color"
    />

请注意layout_height和tabIndicatorHeight具有相同的高度。所以你用这种方式得到漂亮的过渡动画。

Answer 4

我也遇到了这个问题。我刚刚在整个项目中搜索了function set_report() { if($this->session->userdata('logged_in')) { $session_data = $this->session->userdata('logged_in'); if($_FILES['userfile']['name'] != NULL) { $main_dir = './FILES/'.$this->input->post('patientname').'/'; // Check if User Folder is already created. Create New if none exist if(!is_dir($main_dir)){ mkdir($main_dir, 0777); } $target_dir = './FILES/'.$this->input->post('patientname').'/'.$this->input->post('session_id').'/'; // Check if Session Folder is already created. Create New if none exist if(!is_dir($target_dir)) { mkdir($target_dir, 0777); } $config['upload_path'] = './FILES/'.$this->input->post('patientname').'/'.$this->input->post('session_id').'/'; $config['allowed_types'] = 'gif|jpg|png|docx|xlsx|doc|pdf|csv|zip|rar|7zip|ppt|pptx'; $this->load->library('upload', $config); $data2 = array('upload_data' => $this->upload->data()); } $data = array( 'session_id' => $this->input->post('session_id'), 'report_creator' => $session_data['username'], 'report_patientname' => $this->input->post('patientname'), 'report_patientid' => $this->input->post('patientid'), 'report_subject' => $this->input->post('subject'), 'report_description' => $this->input->post('description'), 'report_time' => $this->input->post('date'), 'report_date' => $this->input->post('time') ); return $this->db->insert('session_reports', $data); } }，并在一些tabIndicatorColor中找到了以下代码：

R.java

所以问题解决了。愿这对你有所帮助即我使用IDEA

TabLayout标签样式

4 个答案: