如何在Android的标签布局中设置自定义标签 [英] How to set Custom tab in tab layout in android
问题描述
actvity_main.xml
actvity_main.xml
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:background="#ef9f9f"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
//MainActivity:
// MainActivity :
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
public ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
View headerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE))
.inflate(R.layout.custom_tab, null, false);
final LinearLayout linearLayoutOne = (LinearLayout) headerView.findViewById(R.id.ll);
final LinearLayout linearLayout2 = (LinearLayout) headerView.findViewById(R.id.ll2);
final TextView text1 = (TextView) headerView.findViewById(R.id.tvtab1);
final TextView text2 = (TextView) headerView.findViewById(R.id.tvtab2);
tabLayout.getTabAt(0).setCustomView(linearLayoutOne);
tabLayout.getTabAt(1).setCustomView(linearLayout2);
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
if (tab.getText().equals("ONE")) {
text1.setVisibility(View.VISIBLE);
} else {
text2.setVisibility(View.VISIBLE);
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
if (tab.getText().equals("ONE")) {
text1.setVisibility(View.GONE);
} else {
text2.setVisibility(View.GONE);
}
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new OneFragment(), "ONE");
adapter.addFragment(new TwoFragment(), "TWO");
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 addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}
这是我的代码，我想设置自定义选项卡，例如当我选择第一个选项卡，然后选择指标和选项卡的宽度或第一个选项卡的重量时，我应该增加而第二个选项卡减少，如果我们选择第二个选项卡，则仅显示图像而不是文本那么第一个标签页指示器或权重应降低，而第二个标签页文字和图像应在以下位置可见:
This is my code I want to set custom tab like when i select the first tab then indicator and tab width or weight of the first tab I should increase and second tab decrease show only image not text same if we select the second tab then first tab indicator or weight should decrease and second tab text and image should visibility on:
我当前的屏幕:
在此情况下，您可以看到第一个选项卡是选中的图像，而文本是可见的.第二个选项卡未被选中，因此唯一的可见图像是没有文本的:
in this u can see that tab one is selected image and text are visible tab second is not unselected so the only image is visible no text:
但是我的Expected标签是这样的:
but my Expected tab is like this :
当我们选择选项卡，然后指示器和选项卡的宽度增加而选项卡2减小时，请查看此内容，请向我建议如何实现此.thanx
look in this when we select tab then indicator and width of tab increase and tab 2 decreases please suggest me how I will achieve this .thanx
推荐答案
您可以轻松实现具有标签布局的自定义标签， 试试这个
HI you can easily achieve custom tab with tab layout , Try this one
public void setupTabView(){
for (int i = 0; i < tabLayout.getTabCount(); i++) {
tabLayout.getTabAt(i).setCustomView(R.layout.custom_tab);
TextView tab_name = (TextView) tabLayout.getTabAt(i).getCustomView().findViewById(R.id.txt_tab_name);
tab_name.setText("" + tabNames[i]);
}
}
并创建一个名为custom_tab的可绘制文件
And make one drawable file with name custom_tab
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txt_tab_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="14sp" />
</RelativeLayout>
这篇关于如何在Android的标签布局中设置自定义标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
