Android开发material简单用法

示例:

用法:

首先引入依赖库:

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>

Demo:https://github.com/cuiwenju2017/MaterialDesignDemo

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

举儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值