Question

我试图用＆＃34; ash＆＃34;查看＆＃34; smokeable＆＃34;的百分比视图。它需要是一个百分比，因为我将使用一个滑块，它将改变＆＃34; ash＆＃34;的百分比。图。

这就是我想要的：

Imgur

这是我的代码：

<LinearLayout
    android:id="@+id/cigarette"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:layout_marginBottom="20dp"
    android:orientation="horizontal">

    <View
        android:id="@+id/butt"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".25"
        android:background="#ff7700" />

    <LinearLayout
        android:id="@+id/smokeable"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".75"
        android:background="#cccccc"
        android:orientation="horizontal">

        <View
            android:id="@+id/ash"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".33"
            android:background="#777777"
            android:gravity="right" />

    </LinearLayout>

</LinearLayout>

在这个例子中，我希望灰分是可抽吸视图的33％。我无法弄清楚为什么这不起作用。任何帮助将不胜感激。

Answer 1

我认为~~最简单~~最干净的方法是为你制作一个自定义View“香烟”，它将由过滤器/烟熏/灰烬组成，每个部分都有不同的颜色

因此，在attrs.xml

中声明一些可设置的属性

<resources>
    <declare-styleable name="CigaretteView">
        <attr name="filterColor" format="color" />
        <attr name="smokeableColor" format="color" />
        <attr name="ashColor" format="color" />
        <attr name="filterWidth" format="dimension" />
    </declare-styleable>
</resources>

View类本身：

class CigaretteView(context: Context, attrs: AttributeSet?) : View(context, attrs) {

    companion object {
        private val DEFAULT_FILTER_COLOR = 0xffbbaa00.toInt()
        private val DEFAULT_SMOKABLE_COLOR = 0xffffffff.toInt()
        private val DEFAULT_ASH_COLOR = 0xff888888.toInt()
        private val DEFAUALT_FILTER_WIDTH_PX = 120
    }

    private val filterPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val smokeablePaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val ashPaint = Paint(Paint.ANTI_ALIAS_FLAG)

    private var filterWidthPx = DEFAUALT_FILTER_WIDTH_PX

    private val rect = Rect()

    var smokedPercent = 0f
    set(value) {
        field = value
        invalidate()
    }

    init {
        val a = context.theme.obtainStyledAttributes(attrs, R.styleable.CigaretteView, 0, 0)

        var filterColor = DEFAULT_FILTER_COLOR
        var smokeableColor = DEFAULT_SMOKABLE_COLOR
        var ashColor = DEFAULT_ASH_COLOR

        try {
            filterColor = a.getColor(R.styleable.CigaretteView_filterColor, filterColor)
            smokeableColor = a.getColor(R.styleable.CigaretteView_smokeableColor, smokeableColor)
            ashColor = a.getColor(R.styleable.CigaretteView_ashColor, ashColor)
            filterWidthPx = a.getDimensionPixelSize(R.styleable.CigaretteView_filterWidth, filterWidthPx)
        } finally {
            a.recycle()
        }

        filterPaint.color = filterColor
        smokeablePaint.color = smokeableColor
        ashPaint.color = ashColor
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        rect.set(0, 0, filterWidthPx, height)
        canvas.drawRect(rect, filterPaint)

        val leftOver = (width - filterWidthPx).toFloat()
        val ashStartPoint = (width - leftOver * smokedPercent).toInt()

        rect.set(filterWidthPx, 0, ashStartPoint, height)
        canvas.drawRect(rect, smokeablePaint)

        rect.set(ashStartPoint, 0, width, height)
        canvas.drawRect(rect, ashPaint)
    }
}

您的xml布局将简化为

<com.example.CigaretteView
    android:id="@+id/cigaretteView"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    app:filterWidth="48dp"
    app:filterColor="#ffbbaa00"
    app:smokeableColor="#ffffffff"
    app:ashColor="#ff888888"/>

然后你可以简单地用

指定灰度百分比值

myCigaretteView.smokedPercent = percent

其中percent从0（香烟完好无损）到1（香烟完全吸烟）。

Answer 2

鉴于所有三个元素都符合要求，您只需要一个LinearLayout父元素：

<LinearLayout
    android:id="@+id/cigarette"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:orientation="horizontal">

    <View
        android:id="@+id/butt"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="25"
        android:background="#ff7700" />

    <View
        android:id="@+id/smokeable"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="65"
        android:background="#cccccc" />

    <View
        android:id="@+id/ash"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="10"
        android:background="#777777" />

</LinearLayout>

Answer 3

内部LinearLayout需要另一个孩子View用于尚未消费的部分香烟。在你的例子中，layout_weight必须是1 - 0.33 = 0.67（两个兄弟姐妹的权重总和必须为1）。

<LinearLayout
    android:id="@+id/cigarette"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:layout_below="@+id/titleText"
    android:orientation="horizontal">

    <View
        android:id="@+id/butt"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".25"
        android:background="#ff7700" />

    <LinearLayout
        android:id="@+id/smokeable"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".75"
        android:orientation="horizontal">

        <View
            android:id="@+id/rest"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#cccccc"
            android:layout_weight=".67"
            />
        <View
            android:id="@+id/ash"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".33"
            android:background="#777777"
            android:gravity="right" />

    </LinearLayout>

</LinearLayout>

请注意，虽然这会修复您的代码，但是＆＃34;嵌套加权LinearLayout＆＃34;即使现代设备不应该遇到性能问题，这种方法也不是一个好方法。

涉及自定义View的{{3}}要好得多，因为您只需要一个View，而不是两个ViewGroup加上三个View。您有一种方法可以轻松更改百分比，而且所有计算和绘图部分都可以很好地封装。

Answer 4

这是我能想到的最简单的事情，它能满足您的需求：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:background="#777777"
    android:orientation="horizontal">

    <View
        android:id="@+id/butt"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.25"
        android:background="#ff7700"/>

    <View
        android:id="@+id/smokeable"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.75"
        android:background="#cccccc"
        android:transformPivotX="0px"/>

</LinearLayout>

现在，您可以使用任何百分比调用smokeable.setScaleX()来获得所需的结果。

画一个基本形状的香烟

4 个答案: