如何让我的小部件看起来像谷歌日历小部件?

时间:2015-08-22 12:10:16

标签: android android-listview android-appwidget nine-patch

我希望使用Google日历小部件尽可能地保持我的小部件一致性。查看图片链接(抱歉,我没有足够的声誉来粘贴图片)。颜色用于识别每个元素占用的空间。

image link

widget.xml

<FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="@dimen/widget_margin">

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <RelativeLayout
    android:id="@+id/headerLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:background="@drawable/appwidget_dark_bg_clickable">

    <LinearLayout
      android:id="@+id/configureButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_toLeftOf="@+id/refreshButton"
      android:layout_centerInParent="true"
      android:layout_gravity="center_vertical"
      android:background="#aa999966">

      <TextView
        android:id="@+id/headerTextView"
        android:clickable="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="top|left"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_above="@+id/footerTextView"
        style="@style/headerTextStyle"
        android:text="Channel"/>

      <TextView
        android:id="@+id/footerTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="bottom|left"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        style="@style/footerTextStyle"
        android:text="last update: just started"/>
    </LinearLayout>

    <ImageView
      android:id="@+id/refreshButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="#aa8888bb"
      android:src="@drawable/ic_refresh_white_36dp"
      android:layout_alignParentRight="true"
      android:layout_centerInParent="true"
      android:layout_gravity="center_vertical"/>
  </RelativeLayout>

  <GridView
    android:id="@+id/fieldsGridView"
    android:numColumns="1"
    android:gravity="center"
    android:stretchMode="columnWidth"
    android:background="@color/white"
    android:layout_below="@+id/headerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    android:clipToPadding="false">
  </GridView>

  <TextView
      android:id="@+id/empty_view"
      android:background="@color/white"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_alignParentBottom="true"
      android:layout_below="@+id/headerLayout"
      android:gravity="center"
      style="@style/emptyTextStyle"
      android:text="Empty"/>

</RelativeLayout>
</FrameLayout>

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/appwidget_dark_bg_clickable"
    android:paddingLeft="8dp"
    android:paddingRight="8dp">
    <TextView
        android:id="@+id/fieldNameTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|left"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@+id/fieldValueTextView"
        android:background="#aaff0000"
        style="@style/fieldNameTextStyle"/>
    <TextView
        android:id="@+id/fieldValueTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerInParent="true"
        android:gravity="center_vertical|right"
        android:background="#aa00ff00"
        style="@style/fieldValueTextStyle"/>
</RelativeLayout>

我的问题:

  1. 如何使标题的下半部分成为直的矩形?我需要修改九个补丁图像吗?我正在使用谷歌的模板。我有机会找到他们用于日历的png吗?
  2. 如何减少列表项中的额外空间?即使我只使用android:paddingLeft="8dp"android:paddingRight="8dp"
  3. ,也会有某种填充
  4. 如何增加两个列表项之间的边界?
  5. 由于

1 个答案:

答案 0 :(得分:0)

经过一些研究后回答我自己的问题:

结果,see link

<强> 1。标题形状

可以使用可拉伸的形状。这是一个非常简单的解决方案,不涉及png编辑。

res / drawable

中的

widget_header_background.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
      android:topLeftRadius="3dp"
      android:topRightRadius="3dp"/>
    <solid android:color="#ffff0000"/>
    <stroke
            android:color="#ffff0000"
            android:width="1dp"/>
</shape>

在widget.xml中使用android:background="@drawable/widget_header_background"

<强> 2。列表视图中的额外空间

使用另一种可绘制的形状

<强> widget_header_background.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
      android:radius="3dp"/>
    <solid android:color="@color/grey"/>
    <stroke
            android:color="@color/grey"
            android:width="1dp"/>
</shape>

第3。 Listview分隔符空间

添加

android:divider="#ffffff" 
android:dividerHeight="4dp"

listview