Question

我想在我的标签片段中显示图标和文字，我在我的代码中尝试了一些如下所示的东西，但它只显示了文本。请有人帮助我，因为我是碎片的新手。这是我的java代码：

public class DashboardFragment extends Fragment {
public static TabLayout tabLayout;
public static ViewPager viewPager;
public static int int_items = 3 ;
private String tabTitles[] = new String[] { "Schedule", "Payments", "Judgements" };
private int[] imageResId = {
        R.drawable.schedule_active,
        R.drawable.payment_summary_active,
        R.drawable.judgements_active
};


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    /**
     *Inflate tab_layout and setup Views.
     */
    if (container != null) {
        container.removeAllViews();
    }
    View x =  inflater.inflate(R.layout.tab_layoutdash,null);
    tabLayout = (TabLayout) x.findViewById(R.id.tabs);
    viewPager = (ViewPager) x.findViewById(R.id.viewpager);
    tabLayout.setSelectedTabIndicatorHeight(0);

    Toolbar toolbar = (Toolbar) x.findViewById(R.id.toolbar);
 toolbar.setTitle("                Dashboard");
    toolbar.setTitleTextColor(Color.WHITE);


    /**
     *Set an Apater for the View Pager
     */
    viewPager.setAdapter(new MyAdapter(getChildFragmentManager()));

    /**
     * Now , this is a workaround ,
     * The setupWithViewPager dose't works without the runnable .
     * Maybe a Support Library Bug .
     */

    tabLayout.post(new Runnable() {
        @Override
        public void run() {
            tabLayout.setupWithViewPager(viewPager);

        }
    });
   createTabIcons();
    return x;

}


class MyAdapter extends FragmentPagerAdapter {

    public MyAdapter(FragmentManager fm) {
        super(fm);
    }

    /**
     * Return fragment with respect to Position .
     */

    @Override
    public Fragment getItem(int position)
    {
        switch (position){
            case 0 : return new Schedule();
            case 1 : return new Payment();
            case 2 : return new Judgement();
        }
        return null;
    }

    @Override
    public int getCount() {

        return int_items;

    }

    /**
     * This method returns the title of the tab according to the position.
     */

    @Override
    public CharSequence getPageTitle(int position) {

     Drawable image =  getView().getResources().getDrawable(imageResId[position]);
        image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
        // Replace blank spaces with image icon
        SpannableString sb = new SpannableString(" " + tabTitles[position]);
        ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
        sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        return sb;


    }
}


}

这是xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_marginTop="60dp"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content"
>
<android.support.v7.widget.Toolbar
    android:layout_marginLeft="40dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimaryDark"/>

<android.support.design.widget.TabLayout
    android:theme="@style/tab"
    android:tabStripEnabled="false"
    android:id="@+id/tabs"
    app:tabGravity="fill"
    app:tabMode="fixed"
    android:background="#343434"
    app:tabSelectedTextColor="#ffffff"
    app:tabTextColor="@color/white"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

<android.support.v4.view.ViewPager

    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.v4.view.ViewPager>


</LinearLayout>

Answer 1

在Best TabLayout Example

找到最佳示例

以上示例包含所有类型的tablayout，例如带有图像的标签，固定标签等。

如果有帮助，请告诉我。

谢谢！

Answer 2

Solution:
custom_tab.xml

<relativelayout xmlns:android="http://schemas.android.com/..." android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical|center_horizontal">

<imageview android:id="@+id/tv_tab_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentleft="true" android:layout_alignparentstart="true" android:layout_alignparenttop="true" android:layout_marginright="2dp" android:src="@drawable/ic_car"/>

<textview android:id="@+id/tv_tab_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_torightof="@+id/tv_tab_img" android:paddingtop="4dp" android:text="Description"/>

</relativelayout>

Display Tabs:

<com.nav.customtablayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tabLayout" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:tabindicatorcolor="@color/colorWhite" android:layout_gravity="bottom" app:layout_collapsemode="none" app:tabminwidth="0dp" app:tabgravity="fill" app:tabmode="scrollable">

</com.nav.customtablayout>
<android.support.v4.view.viewpager android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/viewPager_car" android:background="@color/colorGrey" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:scrollbars="vertical"/>

CustomTabLayout.java

/**
* Created by ifawaz on 12/11/16.
*/

import android.content.Context;
import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.AppCompatTextView;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class CustomTabLayout extends TabLayout {
private Typeface mTypeface;

public CustomTabLayout(Context context) {
super(context);
init();
}

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

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

private void init() {
mTypeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/MetalMacabre.ttf"); // here you will provide fully qualified path for fonts
}

@Override
public void setupWithViewPager(ViewPager viewPager) {
super.setupWithViewPager(viewPager);

if (mTypeface != null) {
this.removeAllTabs();
ViewGroup slidingTabStrip = (ViewGroup) getChildAt(0);

PagerAdapter adapter11 = viewPager.getAdapter();

for (int i = 0, count = adapter11.getCount(); i < count; i++) {
Tab tab = this.newTab();
this.addTab(tab.setText(adapter11.getPageTitle(i)));
TextView view = (TextView) ((ViewGroup) slidingTabStrip.getChildAt(i)).getChildAt(1);
view.setTypeface(mTypeface, Typeface.NORMAL);
}
}
}

}

java page for display in activity:
private static final int WIDTH_INDEX = 0;
ViewPager viewPager_car;
TabLayout tabLayout;
ViewPagerAdapter viewPagerAdapter;
String[] tabtitle={"Description","Accessories","Reviews"};
int[] tabicon={R.drawable.ic_car,R.drawable.ic_car,R.drawable.ic_car};

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.xxx);

tabLayout = (TabLayout) findViewById(R.id.tabLayout);
viewPager_car = (ViewPager) findViewById(R.id.viewPager_car);

viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
viewPagerAdapter.addFragments(new description_frag(), "Description");
viewPagerAdapter.addFragments(new acc_frag(),"Accessories");
viewPagerAdapter.addFragments(new acc_frag(),"Reviews");
viewPager_car.setAdapter(viewPagerAdapter);
tabLayout.setupWithViewPager(viewPager_car);

int length = tabtitle.length;
for (int i = 0; i < length; i++) {

// tabLayout.addTab(tabLayout.newTab());

tabLayout.getTabAt(i).setCustomView(R.layout.custom_tab_title);

View tab1_view = tabLayout.getTabAt(i).getCustomView();

TextView tab1_title = (TextView) tab1_view.findViewById(R.id.tv_tab_title);
ImageView img1 = (ImageView) tab1_view.findViewById(R.id.tv_tab_img);

tab1_title.setText(tabtitle[i]);
tab1_title.measure(0, 0);
int x= tab1_title.getMeasuredWidth();

LayoutParams lp = (RelativeLayout.LayoutParams) tab1_title.getLayoutParams();

// Set width in LayoutParams in pixels
lp.width = x;

// Apply the updated layout parameters to TextView
tab1_title.setLayoutParams(lp);

img1.setImageResource(tabicon[i]);
}
final ViewGroup test = (ViewGroup)(tabLayout.getChildAt(0));//tabs is your Tablayout
for (int i = 0; i < length; i++) {
View v = test.getChildAt(i);
v.setPadding(0, 0, 0, 0);
}

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int width=dm.widthPixels;
int tab_width=width/length;
Toast.makeText(getApplicationContext(),width+"hi"+tab_width+"--"+length,Toast.LENGTH_SHORT).show();
ViewGroup slidingTabStrip = (ViewGroup) tabLayout.getChildAt(0);
for (int i = 0; i < length; i++) {
View tab = slidingTabStrip.getChildAt(i);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) tab.getLayoutParams();
layoutParams.weight = 1;
layoutParams.width=tab_width;
tab.setLayoutParams(layoutParams);
}

}

ViewPagerAdapter.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;

/**
* Created by Shreyan on 4/8/2017.
*/
public class ViewPagerAdapter extends FragmentPagerAdapter {
ArrayList<fragment> fragments=new ArrayList<>();
ArrayList<string> tabTitles=new ArrayList<>();

public void addFragments(Fragment fragments,String titles){
this.fragments.add(fragments);
this.tabTitles.add(titles);
}

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

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

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

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

}
compile 'com.android.support:design:23.1.0'

如何在tablayout android中设置带有图标的文本

2 个答案: