示例:
用法:
首先引入依赖库:
implementation 'com.google.android.material:material:1.3.0'
引入viewBinding和JavaVersion.VERSION_1_8
// Android Studio 3.6
viewBinding {
enabled = true
}
// Android Studio 4.0
buildFeatures {
viewBinding = true
}
compileOptions {
targetCompatibility JavaVersion.VERSION_1_8
sourceCompatibility JavaVersion.VERSION_1_8
}
头像圆角加边框:
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/siv"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:padding="2dp"
android:src="@mipmap/ic_launcher"
app:shapeAppearance="@style/CircleStyle"
app:strokeColor="@color/color_F4F5F4"
app:strokeWidth="4dp" />
TabLayout+ViewPager2
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
app:tabIndicator="@drawable/shape_tab_indicator"
app:tabIndicatorColor="@color/colorPrimaryDark"
app:tabIndicatorFullWidth="false"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/colorPrimaryDark"
app:tabTextColor="@color/black" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/vp2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
初始化viewBinding首先父布局或子布局需要添加:
tools:viewBindingIgnore="true"
代码中初始化并使用:
private ActivityMainBinding binding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = ActivityMainBinding.inflate(getLayoutInflater());
setContentView(binding.getRoot());
}
TabLayout与ViewPager2关联:
//添加标题
titles.add("推荐");
titles.add("会员精选");
//添加Fragment进去
fragments.add(new TestFragment(0));
fragments.add(new TestFragment(1));
//实例化适配器
MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(), getLifecycle(), fragments);
//设置适配器
binding.vp2.setAdapter(myAdapter);
//设置abLayout点击时的水波效果 binding.tabLayout.setTabRippleColor(ColorStateList.valueOf(getResources().getColor(R.color.transparent)));
//TabLayout和Viewpager2进行关联
new TabLayoutMediator(binding.tabLayout, binding.vp2, (tab, position) -> tab.setText(titles.get(position))).attach();
TabLayout字体选中变化设置:
/*
字体变化设置
*/
holder = null;
for (int i = 0; i < titles.size(); i++) {
//获取tab
TabLayout.Tab tab = binding.tabLayout.getTabAt(i);
//给tab设置自定义布局
tab.setCustomView(R.layout.tab_item);
holder = new ViewHolder(Objects.requireNonNull(tab.getCustomView()));
//填充数据
holder.tab_item_title.setText(titles.get(i));
//默认选择第一项
if (i == 0) {
holder.tab_item_title.setSelected(true);
holder.tab_item_title.setTextSize(20);
/*常用的字体类型名称有:
Typeface.DEFAULT //常规字体类型
Typeface.DEFAULT_BOLD //黑体字体类型
Typeface.MONOSPACE //等宽字体类型
Typeface.SANS_SERIF //无衬线字体类型
Typeface.SERIF //衬线字体字体类型
常用的字体风格名称还有:
Typeface.BOLD //粗体
Typeface.BOLD_ITALIC //粗斜体
Typeface.ITALIC //斜体
Typeface.NORMAL //常规*/
holder.tab_item_title.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
//字体颜色
holder.tab_item_title.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
}
}
binding.tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
holder = new ViewHolder(tab.getCustomView());
holder.tab_item_title.setSelected(true);
//设置选中后的字体大小
holder.tab_item_title.setTextSize(20);
//字体类型、字体风格
holder.tab_item_title.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
//关联Viewpager
binding.vp2.setCurrentItem(tab.getPosition());
//字体颜色
holder.tab_item_title.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
holder = new ViewHolder(tab.getCustomView());
holder.tab_item_title.setSelected(false);
//恢复默认字体大小
holder.tab_item_title.setTextSize(15);
//字体类型、字体风格
holder.tab_item_title.setTypeface(Typeface.DEFAULT, Typeface.NORMAL);
//字体颜色
holder.tab_item_title.setTextColor(getResources().getColor(R.color.black));
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
MyAdapter继承FragmentStateAdapter
public class MyAdapter extends FragmentStateAdapter {
List<Fragment> fragments;
public MyAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, List<Fragment> fragments) {
super(fragmentManager, lifecycle);
this.fragments = fragments;
}
@NonNull
@Override
public Fragment createFragment(int position) {
return fragments.get(position);
}
@Override
public int getItemCount() {
return fragments.size();
}
}
material用户名密码布局设置
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/til_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="3"
app:counterOverflowTextAppearance="@style/MyOverflowText"
app:errorEnabled="true"
app:errorTextAppearance="@style/MyErrorText"
app:hintTextAppearance="@style/MyHintText">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入用户名" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/colorAccent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入密码"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
用户名输入上限提示
binding.etName.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
if (binding.etName.getText().length() > binding.tilName.getCounterMaxLength()) {
binding.tilName.setError("输入内容超过上限");
} else {
binding.tilName.setError(null);
}
}
});
material各种圆角图片设置等
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:src="@mipmap/ic_launcher" />
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:src="@mipmap/ic_launcher"
app:shapeAppearance="@style/RoundedStyle" />
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:src="@mipmap/ic_launcher"
app:shapeAppearance="@style/CircleStyle" />
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:padding="2dp"
android:src="@mipmap/ic_launcher"
app:shapeAppearance="@style/CircleStyle"
app:strokeColor="@color/colorPrimaryDark"
app:strokeWidth="4dp" />
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:padding="2dp"
android:src="@mipmap/ic_launcher"
app:shapeAppearance="@style/CutStyle"
app:strokeColor="@color/colorPrimaryDark"
app:strokeWidth="4dp" />
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:padding="2dp"
android:src="@mipmap/ic_launcher"
app:shapeAppearance="@style/RhombusStyle"
app:strokeColor="@color/colorPrimaryDark"
app:strokeWidth="4dp" />
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:padding="2dp"
android:src="@mipmap/ic_launcher"
app:shapeAppearance="@style/LeafStyle"
app:strokeColor="@color/colorPrimaryDark"
app:strokeWidth="4dp" />
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:padding="2dp"
android:src="@mipmap/ic_launcher"
app:shapeAppearance="@style/SemicircleStyle"
app:strokeColor="@color/colorPrimaryDark"
app:strokeWidth="4dp" />
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_margin="10dp"
android:padding="2dp"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher"
app:shapeAppearance="@style/HexagonStyle"
app:strokeColor="@color/colorPrimaryDark"
app:strokeWidth="4dp" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/siv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/text2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_margin="10dp"
android:gravity="center"
android:text="@string/app_name" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<TextView
android:id="@+id/text3"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_margin="10dp"
android:gravity="center"
android:text="@string/app_name" />
</RelativeLayout>
代码设置圆角、切角等
// 代码设置圆角、切角
ShapeAppearanceModel shapeAppearanceModel1 = ShapeAppearanceModel.builder()
.setTopLeftCorner((new RoundedCornerTreatment()))
.setTopLeftCornerSize(80.0F)
.setBottomRightCorner((new RoundedCornerTreatment()))
.setBottomRightCornerSize(80.0F)
.setTopRightCorner((new CutCornerTreatment()))
.setTopRightCornerSize(80.0F)
.setBottomLeftCorner((new CutCornerTreatment()))
.setBottomLeftCornerSize(80.0F)
.build();
binding.siv1.setShapeAppearanceModel(shapeAppearanceModel1);
// 代码设置 角和边
ShapeAppearanceModel shapeAppearanceModel2 = ShapeAppearanceModel.builder().
setAllCorners(new RoundedCornerTreatment())
.setAllCornerSizes(50f)
.setAllEdges(new TriangleEdgeTreatment(50f, false))
.build();
MaterialShapeDrawable drawable2 = new MaterialShapeDrawable(shapeAppearanceModel2);
drawable2.setTint(ContextCompat.getColor(getActivity(), R.color.colorPrimaryDark));
drawable2.setPaintStyle(Paint.Style.FILL_AND_STROKE);
drawable2.setStrokeWidth(50f);
drawable2.setStrokeColor(ContextCompat.getColorStateList(getActivity(), R.color.colorAccent));
binding.text2.setTextColor(Color.WHITE);
binding.text2.setBackground(drawable2);
// 代码设置 聊天框效果
ShapeAppearanceModel shapeAppearanceModel3 = ShapeAppearanceModel.builder()
.setAllCorners(new RoundedCornerTreatment())
.setAllCornerSizes(20f)
.setRightEdge(new TriangleEdgeTreatment(20f, false))
.build();
MaterialShapeDrawable drawable3 = new MaterialShapeDrawable(shapeAppearanceModel3);
drawable3.setTint(ContextCompat.getColor(getActivity(), R.color.colorPrimaryDark));
drawable3.setPaintStyle(Paint.Style.FILL);
((ViewGroup) binding.text3.getParent()).setClipChildren(false);
binding.text3.setTextColor(Color.WHITE);
binding.text3.setBackground(drawable3);
styles样式设置等
<!--修改字体和图标的颜色-->
<style name="AppTheme.ToolBar" parent="AppTheme">
<item name="titleTextColor">@color/white</item>
<item name="actionMenuTextColor">@color/white</item>
<item name="colorControlNormal">@color/white</item>
<item name="textAllCaps">false</item>
<item name="actionOverflowMenuStyle">@style/PopupMenu.Overflow</item>
</style>
<!--自定义右上角的图标-->
<style name="ActionButton.Overflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
<item name="android:src">@drawable/menu_more</item>
</style>
<!--修改toolbar弹出框的位置-->
<style name="PopupMenu.Overflow" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<!--false表示弹出框位置位于toolbar下面-->
<item name="overlapAnchor">false</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<!--Floating label text style-->
<style name="MyHintText" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">@color/colorPrimary</item>
</style>
<!--Error label text style-->
<style name="MyErrorText" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">@color/red</item>
</style>
<!--Overflow label text style-->
<style name="MyOverflowText" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">@color/orange</item>
</style>
<!--实现BottomSheetDialog圆角效果-->
<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
</style>
<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@android:color/transparent</item>
</style>
<!--实现BottomSheetDialog圆角效果 且无背景阴影-->
<style name="BottomSheetDialogBg" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
<!--TabLayout字体大小-->
<style name="MyTabLayout">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textAllCaps">false</item>
</style>
<!--ShapeableImageView 去圆角-->
<style name="Corner0Style">
<item name="cornerSize">0dp</item>
</style>
<!--ShapeableImageView 圆角-->
<style name="RoundedStyle">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">10dp</item>
</style>
<!--ShapeableImageView 圆 -->
<style name="CircleStyle">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
<!--ShapeableImageView 切角 -->
<style name="CutStyle">
<item name="cornerFamily">cut</item>
<item name="cornerSize">10dp</item>
</style>
<!--ShapeableImageView 菱形 -->
<style name="RhombusStyle">
<item name="cornerFamily">cut</item>
<item name="cornerSize">50%</item>
</style>
<!--ShapeableImageView 叶子 -->
<style name="LeafStyle">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">50%</item>
<item name="cornerSizeBottomRight">50%</item>
</style>
<!--ShapeableImageView 半圆 -->
<style name="SemicircleStyle">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">50%</item>
<item name="cornerSizeTopRight">50%</item>
</style>
<!--ShapeableImageView 六边形 -->
<style name="HexagonStyle">
<item name="cornerFamily">cut</item>
<item name="cornerSizeTopLeft">50%</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomLeft">50%</item>
<item name="cornerSizeBottomRight">50%</item>
</style>