在Android

时间:2015-08-26 19:48:46

标签: android android-layout material-design android-recyclerview

我想在Android内部的滑动面板中重新创建Material Design list: controls

Material Design list with right reveal mockup from the Material Design guidelines

我正在使用:

我最终使用了部分支持库,但这个特定的应用程序只有5.0+,因此我的代码中可能只有一些Lollipop内容。

以下是我的RecyclerView中列表项的布局:

<com.daimajia.swipe.SwipeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="right">
    <RelativeLayout
        android:layout_width="42dp"
        android:layout_height="match_parent"
        android:background="?android:selectableItemBackground"
        android:clickable="true"
        android:focusable="true">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:src="@drawable/ic_delete_black_24dp"/>

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/surfaceView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ripple_floating"
        android:clickable="true"
        android:focusable="true"
        android:minHeight="48dp"
        android:paddingEnd="16dp"
        android:paddingStart="16dp"
        android:elevation="2dp">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:ellipsize="end"
            android:singleLine="true"
            android:text="..."/>

    </RelativeLayout>
</com.daimajia.swipe.SwipeLayout>

这是目前的结果。

App example with no dividers and one revealed list item

要解决的其他问题是高度阴影和分隔线。

正如您在图像中看到的那样,列表项的两侧有一些合理的阴影。但是项目底部没有高度阴影,因此当项目显示时,在显示区域上方没有阴影显示。

第二个问题是分隔线。我有一个没有图标/图像的单项列表,所以正确的设计是使用项目的分隔符。

但是,我无法使用serso / android-linear-layout-manager中的DividerItemDecoration,因为它没有集成到滑块中,当滑动了2个相邻的项目时会发生这种情况。 App example with dividers and two revealed list items

有没有人知道我应该使用哪些drawable,属性或库来将这些列表项设置为具有高程阴影和边框的材料表?

4 个答案:

答案 0 :(得分:0)

<强>阴影/海拔

对于阴影/高程看起来像你可以使用卡片视图和常用技巧使它们比屏幕宽度略宽(“全宽卡”)。

例如:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="72dp"
    android:layout_marginLeft="@dimen/card_margin_horizontal"
    android:layout_marginRight="@dimen/card_margin_horizontal"
    app:cardCornerRadius="0dp"
    app:cardElevation="4dp">

在values / dimens.xml中:

<dimen name="card_margin_horizontal">-3dp</dimen>

在values-v21 / dimens.xml中

<dimen name="card_margin_horizontal">0dp</dimen>

<强>分频器

然而你可能不需要更改分隔符,它可能看起来不错。 否则,尝试将分隔符添加到视图本身(顶视图或自己控制它的可见性)。它可以只是一个高度为1dp且宽度为match_parentbackgroundColor设置为深灰色(或系统分隔符可绘制(R.attr.listDivider)的视图。

答案 1 :(得分:0)

对于问题的分隔符部分,我建议您查看ItemDecorators。您可以将ItemDecorator添加到LayoutManager并获取分隔符。一个例子是here(如果你谷歌的话,还有几个)

答案 2 :(得分:0)

创建一个名为DividerItemDecoration.java的类并粘贴以下代码

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;


public class DividerItemDecoration extends RecyclerView.ItemDecoration {

private static final int[] ATTRS = new int[]{
        android.R.attr.listDivider
};

public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;

public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;

private Drawable mDivider;

private int mOrientation;

public DividerItemDecoration(Context context, int orientation) {
    final TypedArray a = context.obtainStyledAttributes(ATTRS);
    mDivider = a.getDrawable(0);
    a.recycle();
    setOrientation(orientation);
}

public void setOrientation(int orientation) {
    if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
        throw new IllegalArgumentException("invalid orientation");
    }
    mOrientation = orientation;
}

@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    if (mOrientation == VERTICAL_LIST) {
        drawVertical(c, parent);
    } else {
        drawHorizontal(c, parent);
    }
}

public void drawVertical(Canvas c, RecyclerView parent) {
    final int left = parent.getPaddingLeft();
    final int right = parent.getWidth() - parent.getPaddingRight();

    final int childCount = parent.getChildCount();
    for (int i = 0; i < childCount; i++) {
        final View child = parent.getChildAt(i);
        final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                .getLayoutParams();
        final int top = child.getBottom() + params.bottomMargin;
        final int bottom = top + mDivider.getIntrinsicHeight();
        mDivider.setBounds(left, top, right, bottom);
        mDivider.draw(c);
    }
}

public void drawHorizontal(Canvas c, RecyclerView parent) {
    final int top = parent.getPaddingTop();
    final int bottom = parent.getHeight() - parent.getPaddingBottom();

    final int childCount = parent.getChildCount();
    for (int i = 0; i < childCount; i++) {
        final View child = parent.getChildAt(i);
        final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                .getLayoutParams();
        final int left = child.getRight() + params.rightMargin;
        final int right = left + mDivider.getIntrinsicHeight();
        mDivider.setBounds(left, top, right, bottom);
        mDivider.draw(c);
    }
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    if (mOrientation == VERTICAL_LIST) {
        outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
    } else {
        outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
    }
}
}

并使用addItemDecoration()。 你可以在这个页面上找到完整的教程:

http://www.androidhive.info/2016/01/android-working-with-recycler-view/

答案 3 :(得分:0)

android:clipChildren = "false"添加到SwipeLayout和RecyclerView。
以下是我的RecyclerView中列表项的布局:

<com.daimajia.swipe.SwipeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/swipe_layout"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_marginBottom="1px"
    android:clipChildren="false"
    app:show_mode="lay_down">

    <ImageView
        android:layout_width="60dp"
        android:layout_height="match_parent"
        android:scaleType="center"
        android:src="@drawable/ic_settings_black_24dp"/>

    <FrameLayout
        android:id="@+id/surface_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:elevation="2dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/app_name"/>
    </FrameLayout>
</com.daimajia.swipe.SwipeLayout>

这是我的RecyclerView布局:

<android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorBackground"
        android:clipChildren="false"
        android:scrollbarStyle="outsideOverlay"
        android:scrollbars="vertical"/>

这是目前的结果。

enter image description here