【问题标题】:Add image on 3 tabs在 3 个选项卡上添加图像
【发布时间】:2016-03-07 13:35:04
【问题描述】:

如何将图像添加到标签中?目前我可以将标签移动到底部,但不知道如何将LL Tab1LL Tab2LL Tab3 更改为图标。我走对了吗?任何帮助将不胜感激。

xml 代码

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:padding="5dp" >


        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp"
            android:layout_weight="1" >

            <LinearLayout
                android:id="@+id/ll_tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" />

            <LinearLayout
                android:id="@+id/ll_tab2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" />

            <LinearLayout
                android:id="@+id/ll_tab3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" />
        </FrameLayout>
        <TabWidget
            android:id="@android:id/tabs"
            android:background="@color/light_gray"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"/>
    </LinearLayout>

</TabHost>

有人可以帮忙吗?非常感谢!

【问题讨论】:

    标签: android tabs android-tablayout


    【解决方案1】:

    尝试使用Android Design Support Library中的TabLayoutmaterial design guidelines for tabs会面。

    设计库的 TabLayout 实现了两个固定选项卡,其中 视图的宽度在所有选项卡之间平均分配,以及 可滚动的选项卡,其中选项卡的大小不统一并且可以滚动 水平。

    要实现TabLayout,请检查guidehow to add the icon for swipeable tabs 以使用setIcon 将图标设置为选项卡。

    final int[] ICONS = new int[]{
            R.drawable.ic_action_document,
            R.drawable.ic_action_tick,
            R.drawable.ic_action_trash};
            ....
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(mViewPager);
    
    tabLayout.getTabAt(0).setIcon(ICONS[0]);
    tabLayout.getTabAt(1).setIcon(ICONS[1]);
    tabLayout.getTabAt(2).setIcon(ICONS[2]);
    

    要在 TabLayout 检查中设置底部的选项卡 - How can I set tabs at the bottom and also hide top actionbar? 您将 TabLayout 放在 relativeLayout 中并将其与父底部对齐:

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        app:tabMode="fixed"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        app:tabTextColor="#d3d3d3"
        app:tabSelectedTextColor="#ffffff"
        app:tabIndicatorColor="#ff00ff"
        android:minHeight="?attr/actionBarSize"
        android:layout_alignParentBottom="true"
        />
    

    虽然您可以将标签布局放在底部,但根据Pure Android 指南,尽量不要使用底部标签栏。

    其他平台使用底部标签栏来切换应用的 意见。根据平台约定,Android 的视图控制选项卡是 而是显示在屏幕顶部的操作栏中。

    【讨论】:

      【解决方案2】:
      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;
      
      
      public class MainActivity extends AppCompatActivity {
      
          private Toolbar toolbar;
          private TabLayout tabLayout;
          private ViewPager viewPager;
          private int[] tabIcons = {
              R.drawable.ic_tab_favourite,
              R.drawable.ic_tab_call,
              R.drawable.ic_tab_contacts
      };
      
          @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() {
          tabLayout.getTabAt(0).setIcon(tabIcons[0]);
          tabLayout.getTabAt(1).setIcon(tabIcons[1]);
          tabLayout.getTabAt(2).setIcon(tabIcons[2]);
      }
          private void setupViewPager(ViewPager viewPager) {
              ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
              adapter.addFragment(new OneFragment(), "ONE");
              adapter.addFragment(new TwoFragment(), "TWO");
              adapter.addFragment(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 addFragment(Fragment fragment, String title) {
                  mFragmentList.add(fragment);
                  mFragmentTitleList.add(title);
              }
      
              @Override
              public CharSequence getPageTitle(int position) {
                  return mFragmentTitleList.get(position);
              }
          }
      } 
      

      标签布局 activity_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.v7.widget.Toolbar
                  android:id="@+id/toolbar"
                  android:layout_width="match_parent"
                  android:layout_height="?attr/actionBarSize"
                  android:background="?attr/colorPrimary"
                  app:layout_scrollFlags="scroll|enterAlways"
                  app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
      
              <android.support.design.widget.TabLayout
                  android:id="@+id/tabs"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  app:tabMode="fixed"
                  app:tabGravity="fill"/>
          </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>
      

      此选项卡中使用的片段(类)

      import android.os.Bundle;
      import android.support.v4.app.Fragment;
      import android.view.LayoutInflater;
      import android.view.View;
      import android.view.ViewGroup;
      
      
      
      public class OneFragment extends Fragment{
      
          public OneFragment() {
              // Required empty public constructor
          }
      
          @Override
          public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
          }
      
          @Override
          public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                   Bundle savedInstanceState) {
              // Inflate the layout for this fragment
              return inflater.inflate(R.layout.fragment_one, container, false);
          }
      
      }
      

      Xml 文件 fragment_one.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          tools:context=".fragments.OneFragment">
      
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/one"
              android:textSize="40dp"
              android:textStyle="bold"
              android:layout_centerInParent="true"/>
      
      </RelativeLayout>
      

      TwoFragment.java

      import android.os.Bundle;
          import android.support.v4.app.Fragment;
          import android.view.LayoutInflater;
          import android.view.View;
          import android.view.ViewGroup;
      
      
      
          public class TwoFragment extends Fragment{
      
              public TwoFragment() {
                  // Required empty public constructor
              }
      
              @Override
              public void onCreate(Bundle savedInstanceState) {
                  super.onCreate(savedInstanceState);
              }
      
              @Override
              public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                       Bundle savedInstanceState) {
                  // Inflate the layout for this fragment
                  return inflater.inflate(R.layout.fragment_two, container, false);
              }
      
          }
      

      fragment_two.xml

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          tools:context=".fragments.TwoFragment">
      
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/one"
              android:textSize="40dp"
              android:textStyle="bold"
              android:layout_centerInParent="true"/>
      
      </RelativeLayout>
      

      您可以像我上面所做的那样创建第三个片段类和布局。

      运行它。希望这会奏效

      【讨论】:

        【解决方案3】:

        试试这个,

        将这个activity_main.xml 放入并将自定义高度设置为TabLayout。

        <android.support.design.widget.TabLayout
               android:id="@+id/tabs"
               android:layout_width="match_parent"
               android:layout_height="@dimen/custom_tab_layout_height"
               app:tabMode="fixed"
               app:tabGravity="fill"/>
        

        在 res ⇒ 布局下创建一个名为 custom_tab.xml 的 xml 布局。在此布局中,我们为选项卡定义了自定义视图。

        <?xml version="1.0" encoding="utf-8"?>
        <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/colorAccent"
        android:textSize="@dimen/tab_label"
        android:fontFamily="@string/font_fontFamily_medium"/>
        

        打开 MainActivity.java 并修改代码如下。在这里,如果您观察 setupTabIcons() 方法,我已经使用下面的代码行在每个选项卡中呈现了 custom_tab.xml 布局。

        TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabOne.setText("ONE");
        tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_favourite, 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.ic_tab_call, 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.ic_tab_contacts, 0, 0);
        tabLayout.getTabAt(2).setCustomView(tabThree);
        

        【讨论】:

          【解决方案4】:

          试试这个,真的很有趣。一定是解决办法

          http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

          【讨论】:

            【解决方案5】:

            您可以在每个选项卡的 Linearlayout 中放置一个 ImageView,也可以将一个可绘制对象设置为 LinearLayout 的背景。如果您的图像将充当背景,那么您显然希望将该图像添加为背景,而不是将 ImageView 作为子项添加到您的 LinearLayout。如果它是内容,而不是背景,您应该为每个 LinearLayout 添加一个 ImageView,就像您将任何其他类型的子视图添加到父视图一样。

            【讨论】:

            • 我将一个可绘制对象设置为 LinearLayout 的背景,但图像没有显示
            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2018-04-19
            • 1970-01-01
            • 2015-10-14
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多