创建布局与CardView和浮动操作按钮的Andr​​oid [英] Create the Layout with CardView and Floating Action Button Android

问题描述

我要创建类似下面的图像的材料CardView和自定义浮动操作按钮的布局：

和我的开发高达此布局的XML文件，如下所示：

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;的FrameLayout的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
    的xmlns：FAB =htt​​p://schemas.android.com/apk/res-auto
    机器人：layout_width =match_parent
    机器人：layout_height =WRAP_CONTENT＆GT;

    ＆LT; RelativeLayout的
        机器人：ID =@ + ID / MAINVIEW
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT
        机器人：方向=垂直＆GT;

        ＆LT; android.support.v7.widget.CardView
            机器人：ID =@ + ID / CV
            机器人：layout_width =match_parent
            机器人：layout_height =WRAP_CONTENT
            应用程序：cardCornerRadius =2DP
            应用程序：cardElevation =2DP
            机器人：layout_marginBottom =@扪/ cardMarginVertical
            机器人：layout_marginLeft =@扪/ cardMarginHorizo​​ntal
            机器人：layout_marginRight =@扪/ cardMarginHorizo​​ntal
            机器人：layout_marginTop =@扪/ cardMarginVertical
            应用：卡preventCornerOverlap =假
            应用程序：contentPadding =0dp＆GT;

            ＆LT; com.github.florent37.materialviewpager.sample.ExpandableTextView
                机器人：ID =@ + ID / expandingTextView
                机器人：layout_width =match_parent
                机器人：layout_height =WRAP_CONTENT
                机器人：TEXTSIZE =15dp
                机器人：layout_marginLeft =10dp
                机器人：layout_marginTop =10dp
                机器人：layout_marginRight =10dp
                机器人：layout_marginBottom =10dp
                机器人：文本=@字符串/ LONGTEXT/＆GT;

            ＆LT; RelativeLayout的
                机器人：ID =@ + ID / buttonlayout
                机器人：layout_width =match_parent
                机器人：layout_height =WRAP_CONTENT
                机器人：layout_below =@ + ID / expandingTextView
                机器人：layout_gravity =底
                机器人：背景=@机器人：彩色/透明＆GT;

                ＆LT; com.getbase.floatingactionbutton.FloatingActionButton
                    机器人：ID =@ + ID / action_c
                    机器人：layout_width =WRAP_CONTENT
                    机器人：layout_height =WRAP_CONTENT
                    晶圆厂：fab_colorNormal =＃FFF
                    机器人：layout_alignParentRight =真
                    FAB：fab_color pressed =＃FFF
                    机器人：能见度=看见/＆GT;
            ＆LT; / RelativeLayout的＆GT;
        ＆LT; /android.support.v7.widget.CardView>
    ＆LT; / RelativeLayout的＆GT;
＆LT; /的FrameLayout＆GT;
 

解决方案

要实现像你的照片的用户界面，一些code像下面可以提供帮助。

参数 layout_anchor 和 layout_anchorGravity 在 FloatingActionButton 是点。

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT; android.support.design.widget.CoordinatorLayout的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
        的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
        机器人：方向=垂直
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent＆GT;

    ＆LT; android.support.v4.widget.NestedScrollView
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent
        应用程序：layout_behavior =@字符串/ appbar_scrolling_view_behavior＆GT;

        ＆LT; android.support.v7.widget.CardView
            机器人：ID =@ + ID / CV
            机器人：layout_width =match_parent
            机器人：layout_height =WRAP_CONTENT
            机器人：layout_margin =16DP＆GT;

                ＆LT;的TextView
                    机器人：layout_width =match_parent
                    机器人：layout_height =WRAP_CONTENT
                    机器人：文本=Android的支持库包是一组提供的Andr​​oid框架API的向后兼容的版本和功能，这些功能只能通过库API code库每个支持库是向后兼容特定的Andr​​oid API级别。这样的设计意味着你的应用程序可以使用图书馆的功能，并且仍然有运行Android 1.6（API等级4）及以上设备兼容。 /＆GT;

        ＆LT; /android.support.v7.widget.CardView>

    ＆LT; /android.support.v4.widget.NestedScrollView>

    ＆LT; android.support.design.widget.FloatingActionButton
        机器人：layout_height =WRAP_CONTENT
        机器人：layout_width =WRAP_CONTENT
        应用程序：layout_anchor =@ ID / CV
        应用程序：layout_anchorGravity =右|结束|底
        机器人：layout_margin =16DP
        机器人：可点击=真/＆GT;

＆LT; /android.support.design.widget.CoordinatorLayout>
 

编辑：

早期的答案曾在安卓5.0.1和5.0.2一些bug，FAB将显示如下CardView。

之外 CardView 添加 NestedScrollView 与 layout_behavior 工作在Android的5.0.1和5.0.2

I want to Create the Layout like the Following Image with Material CardView and Custom Floating Action Button:

And I was developed upto this Layout xml file as follows :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:id="@+id/mainview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v7.widget.CardView
            android:id="@+id/cv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardCornerRadius="2dp"
            app:cardElevation="2dp"
            android:layout_marginBottom="@dimen/cardMarginVertical"
            android:layout_marginLeft="@dimen/cardMarginHorizontal"
            android:layout_marginRight="@dimen/cardMarginHorizontal"
            android:layout_marginTop="@dimen/cardMarginVertical"
            app:cardPreventCornerOverlap="false"
            app:contentPadding="0dp">

            <com.github.florent37.materialviewpager.sample.ExpandableTextView
                android:id="@+id/expandingTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="15dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp"
                android:text="@string/longText" />

            <RelativeLayout
                android:id="@+id/buttonlayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/expandingTextView"
                android:layout_gravity="bottom"
                android:background="@android:color/transparent">

                <com.getbase.floatingactionbutton.FloatingActionButton
                    android:id="@+id/action_c"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    fab:fab_colorNormal="#fff"
                    android:layout_alignParentRight="true"
                    fab:fab_colorPressed="#fff"
                    android:visibility="visible" />
            </RelativeLayout>
        </android.support.v7.widget.CardView>
    </RelativeLayout>
</FrameLayout>

解决方案

To implement UI like your picture, some code like below can help.

Parameters layout_anchor and layout_anchorGravity in FloatingActionButton are the point.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.CardView
            android:id="@+id/cv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="The Android Support Library package is a set of code libraries that provide backward-compatible versions of Android framework APIs as well as features that are only available through the library APIs. Each Support Library is backward-compatible to a specific Android API level. This design means that your applications can use the libraries' features and still be compatible with devices running Android 1.6 (API level 4) and up." />

        </android.support.v7.widget.CardView>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/cv"
        app:layout_anchorGravity="right|end|bottom"
        android:layout_margin="16dp"
        android:clickable="true"/>

</android.support.design.widget.CoordinatorLayout>

Edit:

Early answer had some bug in Android 5.0.1 and 5.0.2, FAB would show below CardView.

Add NestedScrollView with layout_behavior outside CardView to work in Android 5.0.1 and 5.0.2

这篇关于创建布局与CardView和浮动操作按钮的Andr​​oid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！