如何让图标位于选项卡布局中文本的左侧？

Question

我试图弄清楚如何让图标不在文本顶部，而是在文本的一侧，但我不确定如何具体使用我的代码来实现。我对 Android Studio 还很陌生，因此我将不胜感激。

XML 代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MyCabinet">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbarMyCabinet"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:background="@color/colorPrimary">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/teacher_files_title"
            android:gravity = "center"
            android:id="@+id/toolbar_title"
            app:fontFamily="@font/capriola"
            android:textSize="20sp"
            />

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorAccent"
        app:elevation="4dp">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:id="@+id/viewPagerMyCabinet"
        android:layout_height="match_parent">

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

</LinearLayout>

活动代码

private TabLayout tabLayout;
private ViewPager viewPager;
private ViewPagerAdapter adapter;


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

    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    viewPager = (ViewPager) findViewById(R.id.viewPagerMyCabinet);
    adapter = new ViewPagerAdapter(getSupportFragmentManager());

    //add fragment here

    adapter.AddFragment(new FragmentMyCabinet(), "My Cabinet");
    adapter.AddFragment(new FragmentUpload(), "Upload");
    adapter.AddFragment(new FragmentRecent(), "Recent");
    viewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.getTabAt(0).setIcon(R.drawable.ic_folder);
    tabLayout.getTabAt(1).setIcon(R.drawable.ic_camera);
    tabLayout.getTabAt(2).setIcon(R.drawable.ic_clock);

    android.support.v7.widget.Toolbar toolbar = findViewById(R.id.toolbarMyCabinet);
    setSupportActionBar(toolbar);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu, menu);
    return true;
}

ViewPagerAdapter

import android.support.annotation.Nullable;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private final List<android.support.v4.app.Fragment> lstFragment = new ArrayList<>();

    private final List<String> lstTitles = new ArrayList<>();

    public ViewPagerAdapter(android.support.v4.app.FragmentManager fm) {
        super(fm);
    }

    @Override
    public android.support.v4.app.Fragment getItem(int position) {
        return lstFragment.get(position);
    }

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

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


    public void AddFragment(android.support.v4.app.Fragment fragment, String title) {

        lstFragment.add(fragment);
        lstTitles.add(title);

    }
}

现在的 UI 如下所示： ui for app

我不确定我是否必须创建一个自定义 xml，如果我这样做了，我也不太确定如何将它顺利地实现到我现在拥有的代码中。

Answer 1

添加 app:tabInlineLabel="true" 实际上对我有用。

<com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabInlineLabel="true"
            app:tabIndicatorHeight="0dp"/>

Answer 2

首先创建一个custom_tab_layout.xml，并在里面放一个Textview：

<?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:gravity="center_horizontal"
android:id="@+id/tab"
android:text="Tab1"
android:textColor="@color/colorAccent"
android:drawableLeft="@mipmap/ic_launcher"
android:textSize="@dimen/tab_label"
android:fontFamily="@string/font_fontFamily_medium"/>

这里的诀窍是 android:drawableLeft="@mipmap/ic_launcher"

在活动中：

TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab_layout, null);
    tabLayout.getTabAt(0).setCustomView(tabOne);

Answer 3

您应该继续在您的 ViewPagerAdapter 中创建一个自定义视图。这是我很快写的一个例子：

MainActivity.Class

public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;

@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);
    ViewPagerAdapter pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), this);
    pagerAdapter.addFragment(new OneFragment(), "ONE");
    pagerAdapter.addFragment(new TwoFragment(), "TWO");
    pagerAdapter.addFragment(new ThreeFragment(), "THREE");
    viewPager.setAdapter(pagerAdapter);

    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    setupTabIcons(pagerAdapter);
}

private void setupTabIcons(ViewPagerAdapter pagerAdapter) {
    for (int i=0;i<tabLayout.getTabCount();i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        if (tab != null) tab.setCustomView(pagerAdapter.getTabView(i));
    }
}

class ViewPagerAdapter extends FragmentPagerAdapter {

    private Context context;
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();
    private int[] tabIcons = {
            R.drawable.ic_android_black_24dp,
            R.drawable.ic_android_black_24dp,
            R.drawable.ic_android_black_24dp
    };

    ViewPagerAdapter(FragmentManager manager, Context context) {
        super(manager);
        this.context = context;
    }

    public View getTabView(int position) {
        View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextView textView = v.findViewById(R.id.textView);
        textView.setText(mFragmentTitleList.get(position));
        ImageView imageView = v.findViewById(R.id.imageView);
        imageView.setImageResource(tabIcons[position]);
        return v;
    }

    @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: 应该保持不变。

这是您的 custom_tab.xml：

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_android_black_24dp"/>

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/imageView"
    android:layout_toEndOf="@+id/imageView"
    android:text="test"
    android:textSize="20sp"
    android:layout_marginStart="5dp"
    android:layout_marginLeft="5dp"/>

您可以随意修改您的 custom_tab。上面的代码只是一个例子。

这是模拟器上的结果：