2016-03-07 40 views
7

如何將圖像添加到選項卡中?目前,我可以將標籤移動到底部,但不知道如何將LL Tab1LL Tab2,LL Tab3更改爲圖標。我在正確的路徑上嗎?任何幫助將不勝感激。在3個選項卡上添加圖像

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> 

enter image description here

任何人都可以幫助嗎?非常感謝 !

回答

7

嘗試使用TabLayoutAndroid Design Support Library以符合material 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的視圖控制選項卡是在屏幕頂部的操作欄中顯示的 。

-1

那麼您可以將ImageView放置在每個選項卡的Linearlayout中,或者可以將可繪製對象設置爲LinearLayout的背景。如果您的圖像將作爲背景,那麼您顯然希望將該圖像添加爲背景,而不是將ImageView作爲子項添加到您的LinearLayout中。如果它要成爲內容,而不是背景,則應該爲每個LinearLayout添加一個ImageView,就像將任何其他類型的子項添加到父視圖一樣。

+1

我設置可繪製爲背景的LinearLayout,但圖像不顯示 –

2

試試這個,

北醫三院這個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
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> 

您可以創建第三個片段類和佈局,我在上面所做的。

運行它。希望這會工作

相關問題