2016-03-22 72 views
4

您好,我在我的活動中創建了標籤佈局。這是主要的的.xml文件將標籤佈局中的圖標向左對齊

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    android:id="@+id/main_layout" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="com.xxxxxx.eventmanager.EventDetailsActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent" 
     android:id="@+id/toolbarContainer" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentTop="true" 
      android:background="?attr/colorPrimary" 
      android:elevation="6dp" 
      android:minHeight="?attr/actionBarSize" 
      app:popupTheme="@style/AppTheme.PopupOverlay" /> 

    </android.support.design.widget.AppBarLayout> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tab_layout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/toolbarContainer" 
     android:background="?attr/colorPrimary" 
     android:elevation="6dp" 
     android:minHeight="?attr/actionBarSize" 
     app:tabTextColor="@color/colorLight" 
     app:tabSelectedTextColor="@color/colorAccent" 
     android:textAlignment="" 
     android:theme="@style/AppTheme"/> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="fill_parent" 
     android:layout_below="@id/tab_layout"/> 

</RelativeLayout> 

這是我的.java類:

package com.xxxxxx.eventmanager; 

import android.graphics.drawable.Drawable; 
import android.support.design.widget.TabLayout; 
import android.support.v13.app.FragmentPagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.os.Bundle; 
import android.support.v7.app.AppCompatActivity; 
import android.support.v7.widget.Toolbar; 
import android.view.Menu; 
import android.view.MenuItem; 

import com.xxxxxx.eventmanager.adapters.EventPagerAdapter; 

public class EventDetailsActivity extends AppCompatActivity { 

    /** 
    * The {@link android.support.v4.view.PagerAdapter} that will provide 
    * fragments for each of the sections. We use a 
    * {@link FragmentPagerAdapter} derivative, which will keep every 
    * loaded fragment in memory. If this becomes too memory intensive, it 
    * may be best to switch to a 
    * {@link android.support.v13.app.FragmentStatePagerAdapter}. 
    * 
    * private SectionsPagerAdapter mSectionsPagerAdapter; 
    * 
    */ 

    private Toolbar toolbar; 

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

     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
     setSupportActionBar(toolbar); 

     TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout); 
     tabLayout.addTab(tabLayout.newTab().setText("Details").setIcon(R.mipmap.ic_details)); 
     tabLayout.addTab(tabLayout.newTab().setText("Sales").setIcon(R.mipmap.ic_sales)); 
     tabLayout.addTab(tabLayout.newTab().setText("Purchases").setIcon(R.mipmap.ic_purchase)); 
     tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); 

     final ViewPager viewPager = (ViewPager) findViewById(R.id.pager); 
     final EventPagerAdapter adapter = new EventPagerAdapter 
       (getSupportFragmentManager(), tabLayout.getTabCount()); 
     viewPager.setAdapter(adapter); 
     viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); 
     tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
      @Override 
      public void onTabSelected(TabLayout.Tab tab) { 
       viewPager.setCurrentItem(tab.getPosition()); 
      } 

      @Override 
      public void onTabUnselected(TabLayout.Tab tab) { 

      } 

      @Override 
      public void onTabReselected(TabLayout.Tab tab) { 

      } 
     }); 

    } 


    @Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
     // Inflate the menu; this adds items to the action bar if it is present. 
     getMenuInflater().inflate(R.menu.menu_event_details, menu); 
     return true; 
    } 

    @Override 
    public boolean onOptionsItemSelected(MenuItem item) { 
     // Handle action bar item clicks here. The action bar will 
     // automatically handle clicks on the Home/Up button, so long 
     // as you specify a parent activity in AndroidManifest.xml. 
     int id = item.getItemId(); 

     //noinspection SimplifiableIfStatement 
     if (id == R.id.action_settings) { 
      return true; 
     } 

     return super.onOptionsItemSelected(item); 
    } 

} 

現在目前標籤顯示是這樣的:現在然而 enter image description here

我希望圖標顯示在文本的左側,而不是文本的頂部。

回答

0

使用自定義視圖:

TextView newTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); 
newTab.setText("tab1"); //tab label txt 
newTab.setCompoundDrawablesWithIntrinsicBounds(your_drawable_icon_here, 0, 0, 0); 
tabLayout.getTabAt(tab_index_here_).setCustomView(newTab); 
0

通過@Tjerkw給出的答案是確定的只是它在整個標籤不循環。我想正確的解決方案應該是這樣的

for (int i = 0; i < tabLayout.getTabCount(); i++) { 
    yourlinearlayout = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.title_text, null); 
    tab_text = (TextView) yourlinearlayout.findViewById(R.id.tabContent); 
      tab_text.setText(" " + tab_titles[i]); 
    tab_text.setCompoundDrawablesWithIntrinsicBounds(tabicons[i], 0, 0, 0); 
     tabLayout.getTabAt(i).setCustomView(tab_text);} 

和代表R.layout.title_text佈局資源的.xml將

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:gravity="center"> 
<TextView 
    android:id="@+id/tabContent" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:textAlignment="center" 
    android:textColor="@android:color/white" 
    android:gravity="center"/> 

最後,tabicons[i]和標籤tab_titles[i]是包含各自的內容只是字符串數組。 我知道這個問題的舊,但我最近面臨這一點,我敢肯定別人可能仍然需要這個

0

TabLayout還支持自定義視圖,而不是TabView。

1,創建你的標籤項目佈局。主要思路是我們應該使用指定的ID爲 ImageView的@android:ID /圖標和TextView的@android:ID /文本1

R.layout.custom_tab_item

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="?attr/actionBarSize" 
    android:orientation="horizontal"> 

    <ImageView 
     android:id="@android:id/icon" 
     android:layout_width="32dp" 
     android:layout_height="32dp" 
     android:padding="4dp" 
     android:layout_gravity="center_vertical"/> 

    <TextView 
     android:id="@android:id/text1" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:textSize="@dimen/large_text" 
     android:padding="4dp" 
     android:layout_gravity="center_vertical" 
     android:gravity="center_vertical"/> 

</LinearLayout> 

2.與TabLayout xml文件

<android.support.design.widget.TabLayout 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/tab_layout" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:background="?attr/colorPrimary" 
     app:tabMaxWidth="0dp" 
     app:tabGravity="fill" 
     app:tabMode="fixed" 
     android:theme="@style/vocabularyTheme.ActionBar" /> 

3.創建tabLayout使用自定義視圖,並刪除底部邊緣,這是默認8DP設立

mTabLayout = (TabLayout) findViewById(R.id.tab_layout);  
mTabLayout.addTab(createTab(text1,icon1)); 
mTabLayout.addTab(createTab(text2,icon2)); 

private TabLayout.Tab createTab(String text, Drawable icon){ 
    TabLayout.Tab tab = mTabLayout.newTab().setText(text).setIcon(icon).setCustomView(R.layout.custom_tab_item); 

    // remove imageView bottom margin 
    if (tab.getCustomView() != null){ 
     ImageView imageView = (ImageView) tab.getCustomView().findViewById(android.R.id.icon); 
     ViewGroup.MarginLayoutParams lp = ((ViewGroup.MarginLayoutParams) imageView.getLayoutParams()); 
     lp.bottomMargin = 0; 
     imageView.requestLayout(); 
    } 

    return tab; 
} 

預期結果。

Align Icons in Tab Layout To The Left

0

你必須引進ActionMenuViewToolbar

Google Official docs「ActionMenuView是一系列的菜單選項爲視角的呈現,它提供了幾個頂級的選項,操作按鈕,同時在灑剩下的選項中溢出的菜單項。這允許應用程序提交包的行動與特定或重複的內容保持一致。「

例如,

<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/tToolbar" 
    android:layout_height="?attr/actionBarSize" 
    android:layout_width="match_parent" 
    android:background="?attr/colorPrimary" 
    android:gravity="center_vertical|start" 
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"> 

    <android.support.v7.widget.ActionMenuView 
     android:id="@+id/amvMenu" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize"/> 
</android.support.v7.widget.Toolbar> 

而且你的活動,

Toolbar t = (Toolbar) findViewById(R.id.tToolbar); 
    amvMenu = (ActionMenuView) t.findViewById(R.id.amvMenu); 
    amvMenu.setOnMenuItemClickListener(new ActionMenuView.OnMenuItemClickListener() { 
     @Override 
     public boolean onMenuItemClick(MenuItem menuItem) { 
     return onOptionsItemSelected(menuItem); 
     } 
    });