logo标签列表

选项卡图标和文本都使用Android设计支持库

androidandroiddesignsupportandroid-tablayout
8

在启动时，选项卡看起来像这样这是我在启动时的项目..所有选项卡都是黑色的，但我希望第一个选项卡是橙色的（它的图标和文本）[![当我移动到第二个选项卡时，它可以正常工作[![当我回到第一个选项卡时，它可以按照我想要的方式工作..主要问题是应用程序启动时]1]1我使用了Android设计支持TabLayout，并在选项卡上获得了图标和文本..我使用了CustomTabView来垂直对齐图标和文本..当选中/取消选中时，我想更改图标和文本的颜色。

我为不同的选项卡图标制作了选择器文件。但问题是当我运行项目时，第一个默认选项卡未被选中，我希望它们默认被选中。如果我转到其他选项卡，然后向后滑动到第一个选项卡，它可以正常工作。主要问题是我无法使第一个选项卡片段被选中。请帮助我，因为我已经卡在这里两天了，而且我不想使用来自Github的任何库。

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;



public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private int[] tabIcons = {
            R.drawable.image1,
            R.drawable.image2,
            R.drawable.image3
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();
    }

    private void setupTabIcons() {

        TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabOne.setText("ONE");
        tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.image1, 0, 0);
        tabLayout.getTabAt(0).setCustomView(tabOne);

        TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabTwo.setText("TWO");
        tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.image2, 0, 0);
        tabLayout.getTabAt(1).setCustomView(tabTwo);

        TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabThree.setText("THREE");
        tabThree.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.image3, 0, 0);
        tabLayout.getTabAt(2).setCustomView(tabThree);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new OneFragment(), "ONE");
        adapter.addFrag(new TwoFragment(), "TWO");
        adapter.addFrag(new ThreeFragment(), "THREE");
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
}

image1.xml

 <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/x1" android:state_selected="true" />
        <item android:drawable="@drawable/x2" />
    </selector>

为三个不同的图像创建如上所示的三个文件。

custom_tab.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tab"
    android:textColor="@color/selector"
    android:textSize="@dimen/tab_label"
    android:fontFamily="@string/font_fontFamily_medium"/>

用于文本的selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
        android:color="#fe5d55" /> <!-- pressed -->
    <item android:state_pressed="true"
        android:color="#fe5d55" /> <!-- focused -->
    <item android:color="#000000" /> <!-- default -->
</selector>

有人可以帮忙吗？

1
你试过 addTab(TabLayout.Tab tab, boolean setSelected) 吗？ - hoomi
实际上我正在使用自定义视图来创建选项卡布局... 我不知道如何使用上面的代码或进行更改... 请告诉我，参考上面的代码。 - Aman Verma
请添加您的选择器和自定义视图代码。 - hoomi
@hoomie编辑了帖子并附上了你要求的文件。如果你有时间，能否在你的系统上运行它并告诉我哪里不足之处？ - Aman Verma
首先，我不确定您是否需要使用自定义布局，因为它只是一个“TextView”。其次，即使您使用自定义布局，“addTab（TabLayout.Tab tab，boolean setSelected）”仍应该能够使用正确的选择器。 - hoomi
这里有一个好的教程：http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/ - Jaider
2个回答
4

“未选择”是什么意思？您能分享一下您正在尝试实现的内容以及当前的进展情况的图片吗？

我不建议您采用这种方法。它做了很多不必要的事情来解决您的问题。我建议利用TabLayout类中的图标和文本，只需设置您的图标（带状态的可绘制对象）和文本即可。或者，如果需要自定义布局，则可以使用TabLayout中的text1和icon。您有任何问题吗？

更新..

请尝试以下：

IconTextTabLayout.java:

package example.customtabs;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.util.AttributeSet;

import sample.customtabs.example.com.customtabs.R;


public class IconTextTabLayout extends TabLayout {


    public IconTextTabLayout(Context context) {
        super(context);
    }

    public IconTextTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public IconTextTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter) {
        this.removeAllTabs();
        int i = 0;
        for (int count = adapter.getCount(); i < count; ++i) {
            this.addTab(this.newTab().setCustomView(R.layout.custom_tab)
                    .setIcon(YourIcons[i])
                    .setText(adapter.getPageTitle(i)));
        }
    }
}

custom_tab.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:orientation="vertical">


    <ImageView
        android:id="@android:id/icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@android:id/text1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

在您的活动XML中使用IconTextTabLayout。例如：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <example.customtabs.IconTextTabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white"/>

</LinearLayout>

此外，在您的活动中设置视图翻页器，例如：
IconTextTabLayout tabLayout = (IconTextTabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);

在您的ViewPager适配器中覆盖getPageTitle方法以提供标题。

@Override
public CharSequence getPageTitle(int position) {
    return TITLES[i];
}

此外，如果您想要，也可以从适配器中获取图标，方法是编写一个返回可绘制对象的方法，就像getPageTitle方法一样。这是可选的，只是设计问题。

--

YourIcons[] = 这是一个可绘制对象数组。 在您的情况下 - xml文件，具有选定和未选定的图像...

我上传了两张图片...第一张是目前的状态...你可以看到三个标签都没有被选中(因为我将未选中的颜色设为黑色)...而第二张是我想要的...当应用程序启动时，第一个标签应该被选中(橙色)...但是当我回到第一个标签时，它可以正常工作，只是我还没有找到默认选中第一个标签的方法...我还没有尝试过你的方法...但请帮帮我...我不是Android专家...或者你可以提供你的电子邮件地址，我会把整个项目发送给你。 - Aman Verma
嘿伙计，我看不到选项卡文本和图标了......我转而做其他事情，跳过这个...我必须提交我的项目...如果你有时间，能否帮我完成这部分...你知道所有的东西...给我你的电子邮件或其他联系方式，我可以把项目发送给你....拜托了....现在是时候了...谢谢....我知道你的答案会起作用，但我必须完成我的应用程序的主要工作...请回复..谢谢。 - Aman Verma
我遇到了这个问题：Caused by: android.view.InflateException: Binary XML file line #15: Error inflating class example.customtabs.IconTextTabLayout。 - Vincent Roye
3

不需要像@Abhilash的答案中指定的那样自定义TabLayout，只需在以下代码中添加一行即可：tabOne.setSelected(true);

TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabOne.setText("ONE");
tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.image1, 0, 0);
tabOne.setSelected(true);  //This will make your tab by default selected
tabLayout.getTabAt(0).setCustomView(tabOne);
当选中时，如何获取回那个CompoundDrawable以设置ColorFilter？ - Kannan_SJD
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接