像Google Clock一样的Android Day Picker？

我有一个应用程序,我希望用户能够点击一周中的几天,就像谷歌时钟这样做.请参阅下面的图片,以更好地说明我的目标.

我已经四处搜索,甚至找不到添加此功能的库.我能想到的唯一解决方案是使用各种ImageButton的水平布局,但这不会有动画,我认为不是一个非常干净的解决方案.

这是什么类型的视图,我如何在我的Android应用程序中实现类似的功能？

对不起我的英语不好.

我告诉你我自己的解决方案,这是最终的结果：

1.-在drawable文件夹中创建toogle_text_color,此文件用于在按钮打开/关闭时更改文本的颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
    android:color="@color/colorAccent"/>

<item android:state_checked="true"
    android:color="#FFF" />
</selector>

2.-在同一文件夹中创建shape_oval,这将是按钮的背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorAccent" />
<size
    android:width="20dp"
    android:height="20dp" />
</shape>

3.-在同一文件夹中创建toggle_bg,这将使用椭圆形背景或透明背景选择按钮打开/关闭时的背景颜色.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
  android:drawable="@android:color/transparent" />
<item android:state_checked="true"
  android:drawable="@drawable/shape_oval" />
</selector>

4.-在项目的样式文件中添加下一行.

<style name="Widget.Button.Toggle" parent="android:Widget">
    <item name="android:background">@drawable/ic_toggle_bg</item>
</style>

<style name="toggleButton" parent="DefaultTheme">
    <item name="android:buttonStyletoggle">@style/Widget.Button.Toggle</item>
    <item name="android:textColor">@drawable/toggle_text_color</item>
</style>

5.-使用此内容在布局文件夹中创建** daypicker文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<ToggleButton
    android:id="@+id/tD"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:textOff="D"
    android:textOn="D"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />
<ToggleButton
    android:id="@+id/tL"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:textOff="L"
    android:textOn="L"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />

<ToggleButton
    android:id="@+id/tM"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:textOff="M"
    android:textOn="M"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />

<ToggleButton
    android:id="@+id/tMi"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:textOff="M"
    android:textOn="M"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />

<ToggleButton
    android:id="@+id/tJ"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:textOff="J"
    android:textOn="J"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />

<ToggleButton
    android:id="@+id/tV"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:textOff="V"
    android:textOn="V"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />

<ToggleButton
    android:id="@+id/tS"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:textOff="S"
    android:textOn="S"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />
</LinearLayout>

6.-使用以下标签导入布局：

    <LinearLayout
        android:id="@+id/daypicker_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linearLayout"
        android:layout_centerHorizontal="true">

        <include
            android:id="@+id/daypicker"
            layout="@layout/daypicker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></include>
    </LinearLayout>

我首先添加一个LinearLayout,因为我想在某些项目下方对齐,但您可以自定义此部分.

7.-最后在代码中你可以获得这样的标记项：

创建对象：

//Day buttons
ToggleButton tD;
ToggleButton tL;
ToggleButton tM;
ToggleButton tMi;
ToggleButton tJ;
ToggleButton tV;
ToggleButton tS;

实例

    tD = (ToggleButton) findViewById(R.id.tD);
    tL = (ToggleButton) findViewById(R.id.tL);
    tM = (ToggleButton) findViewById(R.id.tM);
    tMi = (ToggleButton) findViewById(R.id.tMi);
    tJ = (ToggleButton) findViewById(R.id.tJ);
    tV = (ToggleButton) findViewById(R.id.tV);
    tS = (ToggleButton) findViewById(R.id.tS);

并得到标记的项目.

        String markedButtons= "";
    //Check individual items.
    if(tD.isChecked()){
        markedButtons +="D,";
    }
    if(tL.isChecked()){
        markedButtons +="L,";
    }
    if(tM.isChecked()){
        markedButtons +="M,";
    }
    if(tMi.isChecked()){
        markedButtons +="Mi,";
    }
    if(tJ.isChecked()){
        markedButtons +="J,";
    }
    if(tV.isChecked()){
        markedButtons +="V,";
    }
    if(tS.isChecked()){
        markedButtons +="S";
    }
    Toast.makeText(this, markedButtons, Toast.LENGTH_SHORT).show();

如果要添加动画,可以使用TransitionDrawable来完成.

像Google Clock一样的Android Day Picker？

相关推荐