美文网首页Android Dev
Android记录material包下的好工具(Slider、S

Android记录material包下的好工具(Slider、S

作者: 坑逼的严 | 来源:发表于2021-10-09 17:19 被阅读0次

记录一下,万一以后用到了呢?
导包

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

Slider

1633769669145.gif

代码

<com.google.android.material.slider.Slider
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="40dp"
        android:layout_gravity="center"
        android:valueTo="100f"
        android:valueFrom="0f"
        android:value="20f"
        app:haloColor="@color/mainColor"
        app:haloRadius="20dp"
        app:labelBehavior="withinBounds"
        app:thumbColor="@color/ff666666"
        app:thumbRadius="10dp"
        app:thumbElevation="10dp"
        app:trackColorActive="@color/mainColor"
        app:trackColorInactive="@color/ff666666"/>

    <com.google.android.material.slider.RangeSlider
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        app:values="@array/initial_slider_values"
        android:valueTo="100f"
        android:valueFrom="0f"
        app:labelBehavior="withinBounds"/>
    <com.google.android.material.slider.Slider
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:valueTo="100f"
        android:valueFrom="0f"
        android:stepSize="10"
        app:labelBehavior="withinBounds"/>

总长度和当前长度代码

android:valueTo="100f"
android:valueFrom="0f"
android:value="20f"

拖动时出现的大圆提示

app:haloColor="@color/mainColor"
app:haloRadius="20dp"//如果不想要,就设置为0dp

圆圈上面的数字提示框设置

app:labelBehavior="withinBounds"

他有floating、withinBounds、gone三种,gone肯定是不展示,经过我的测试设置floating在个别手机上面会有显示bug,看下图:


1633770131231.gif

lable没有消失,出现问题的手机是华为p10,小米10是好的。所以这里都用withinBounds模式。
滑块的设置

app:thumbColor="@color/ff666666"
app:thumbRadius="10dp"//圆的半径
app:thumbElevation="10dp"//悬浮阴影

进度条背景颜色设置

app:trackColorActive="@color/mainColor"//以拖动的区域
app:trackColorInactive="@color/ff666666"//未覆盖的区域

RangeSlider的话注意app:values="@array/initial_slider_values"

<string-array name="initial_slider_values">
        <item>0</item>
        <item>100</item>
    </string-array>

这样设置,默认从两端开始拖动
步长设置

android:stepSize="10"

每10的数字打个点。

ShapeableImageView

Screenshot_20211009_171046_com.example.demo.jpg

代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".materialViews.image.ShapeableImageViewActivity">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center_horizontal">
        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@mipmap/test"
            android:layout_marginTop="10dp"/>
        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@mipmap/test"
            android:layout_marginTop="10dp"
            app:shapeAppearance="@style/CircleStyle"/>
        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@mipmap/test"
            android:layout_marginTop="10dp"
            app:shapeAppearance="@style/CutStyle"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center_horizontal">
        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@mipmap/test"
            android:layout_marginTop="10dp"
            app:shapeAppearance="@style/RoundedStyle"/>
        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@mipmap/test"
            android:layout_marginTop="10dp"
            app:shapeAppearance="@style/CircleStyle"
            app:strokeColor="@android:color/holo_orange_light"
            app:strokeWidth="2dp"
            android:padding="1dp"/>
        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@mipmap/test"
            android:layout_marginTop="10dp"
            app:shapeAppearance="@style/RhombusStyle"/>
    </LinearLayout>
</LinearLayout>
<style name="RoundedStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">10dp</item>
</style>

<style name="CircleStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
</style>

<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>

当然这是简单的使用
主要注意cornerFamily,他有rounded和cut两种,如果需要圆角那就是rounded,如果需要多边形,那么需要cut。你可以把cornerFamily理解成设置这个属性控制图片的4个角,那么他肯定有单独设置某个角的功能

<item name="cornerFamilyBottomRight"/>
<item name="cornerFamilyBottomLeft"/>
<item name="cornerFamilyTopLeft"/>
<item name="cornerFamilyTopRight"/>

然后cornerSize可以设置具体数字,也能百分比。当然我们可以单独设置摸一个角。

<item name="cornerSizeBottomLeft"></item>
<item name="cornerSizeBottomRight"></item>
<item name="cornerSizeTopLeft"></item>
<item name="cornerSizeTopRight"></item>

相关文章

网友评论

    本文标题:Android记录material包下的好工具(Slider、S

    本文链接:https://www.haomeiwen.com/subject/kjwqoltx.html