如何在Toolbar左侧设置Circular ImageView并实现Tab滑动时TextView切换？

嘿，我来帮你搞定这两个需求！咱们拆成两部分来解决，先搞定Toolbar左侧的圆形ImageView，再处理Tab滑动切换TextView内容的问题～

这里有两种常用的实现思路，看你偏好哪种：

1. 自定义Toolbar布局（灵活控制所有元素） #

首先创建一个自定义的Toolbar布局文件toolbar_custom.xml，把圆形ImageView放进去：

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary">

    <!-- 左侧圆形头像 -->
    <ImageView
        android:id="@+id/iv_profile"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/your_profile_pic"
        android:layout_marginStart="16dp"/>

    <!-- 可选：Toolbar中间的标题 -->
    <TextView
        android:id="@+id/tv_toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我的应用"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:layout_gravity="center"/>

</androidx.appcompat.widget.Toolbar>

然后在你的Activity布局里引入这个Toolbar：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/toolbar_custom"/>

    <!-- 下面放TabLayout和ViewPager -->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

2. 实现圆形效果的两种方式 #

方式一：用Glide直接裁剪（推荐！简单省心） #

如果你用Glide加载图片（不管是本地资源还是网络图片），直接调用它的内置圆形裁剪方法就行，不用写自定义View：

// 在Activity的onCreate里
ImageView profileIv = findViewById(R.id.iv_profile);
Glide.with(this)
     .load(R.drawable.your_profile_pic) // 换成你的图片资源或URL
     .circleCrop() // 关键：圆形裁剪
     .into(profileIv);

记得在build.gradle里引入Glide依赖：

implementation 'com.github.bumptech.glide:glide:4.15.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.15.1'

方式二：自定义圆形ImageView类 #

如果你不想用第三方库，可以自己写一个自定义ImageView：

public class CircularImageView extends AppCompatImageView {
    private final Paint paint = new Paint();
    private final RectF rectF = new RectF();

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

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

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

    private void init() {
        paint.setAntiAlias(true); // 抗锯齿
    }

    @Override
    protected void onDraw(Canvas canvas) {
        rectF.set(0, 0, getWidth(), getHeight());
        // 绘制圆形遮罩
        canvas.drawRoundRect(rectF, getWidth()/2f, getHeight()/2f, paint);
        // 只显示遮罩内的图片
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        super.onDraw(canvas);
    }
}

然后把布局里的ImageView换成这个自定义的CircularImageView就行。

这里我们用TabLayout+ViewPager的组合来实现，两种场景都给你讲：

场景1：TextView在每个Fragment里（推荐，符合组件化思想） #

第一步：准备数据和Fragment #

先定义Tab标题和对应内容：

private final String[] tabTitles = {"首页", "发现", "我的"};
private final String[] tabContents = {"欢迎来到首页！", "发现更多精彩内容～", "这是你的个人中心"};

然后创建一个通用的内容FragmentContentFragment：

public class ContentFragment extends Fragment {
    private static final String ARG_CONTENT = "content";
    private String content;

    // 静态工厂方法，传递内容参数
    public static ContentFragment newInstance(String content) {
        ContentFragment fragment = new ContentFragment();
        Bundle args = new Bundle();
        args.putString(ARG_CONTENT, content);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            content = getArguments().getString(ARG_CONTENT);
        }
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_content, container, false);
        TextView tvContent = view.findViewById(R.id.tv_content);
        tvContent.setText(content);
        return view;
    }
}

对应的fragment_content.xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textColor="@android:color/black"/>

</LinearLayout>

第二步：关联TabLayout和ViewPager #

在Activity里初始化ViewPager和TabLayout：

ViewPager viewPager = findViewById(R.id.view_pager);
TabLayout tabLayout = findViewById(R.id.tab_layout);

// 设置PagerAdapter
viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager(), FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    @NonNull
    @Override
    public Fragment getItem(int position) {
        return ContentFragment.newInstance(tabContents[position]);
    }

    @Override
    public int getCount() {
        return tabTitles.length;
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles[position];
    }
});

// 让TabLayout和ViewPager联动
tabLayout.setupWithViewPager(viewPager);

场景2：TextView在Activity布局里（简单直接） #

如果你的TextView就在Activity的根布局里，不用Fragment的话，直接监听TabLayout的选中事件就行：

TextView tvContent = findViewById(R.id.tv_activity_content);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        // 切换Tab时更新TextView内容
        tvContent.setText(tabContents[tab.getPosition()]);
    }

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

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

注意事项 #

别忘了在build.gradle里引入Material Components库（因为用了TabLayout）：

implementation 'com.google.android.material:material:1.9.0'

内容的提问来源于stack exchange，提问作者user8216539