我将如何实施Google的默认材料示例?

问题描述 投票:0回答:1

因此,在google.com/design上,Google使用以下模型:

“模型”

我将如何归档这样的内容?它显然使用了片段,我猜想是来自支持库的Cardsview / Recyclerview小部件。

但是我并没有设法存档一个以这种精确方式展示我的内容的设计。是否有某种默认模板可以帮助我入门?你有什么提示吗?互联网上有很多片段的教程,但没有一个像模型中那样使用确切的材料设计。

我是Android开发的新手(但总体上不是开发人员),并且希望遵循官方指南,但似乎很难归档。Google对某些代码的唯一参考,我可以使用Google I / O应用程序,但这相当复杂。我不明白为什么Google不会提供默认模板,其中包含所有这些不错的素材主题元素,您可以以此为基础进行修改。

android material-design
1个回答
1
投票

考虑到我不是设计师,我理解您的无奈。我有几个用于在GitHub上实现材料设计的存储库。片段将是一个完全不同的问题,因此我在主要活动中发布代码。一个与您发布的基于移动设备的图像相匹配的示例。

“

样式

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/light_blue</item>
        <item name="colorPrimaryDark">@color/dark_blue</item>
        <item name="android:windowBackground">@color/white</item>
        <item name="android:textColorPrimary">@color/white</item>
        <item name="android:textColor">@color/dark_grey</item>
        <item name="windowActionBar">false</item>
    </style>
</resources>

尺寸

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>

    <dimen name="fab_button_diameter">56dp</dimen>
    <dimen name="fab_button_margin_bottom">16dp</dimen>
    <dimen name="fab_button_margin_right">16dp</dimen>
    <dimen name="elevation_low">1dp</dimen>
    <dimen name="elevation_high">8dp</dimen>
</resources>

颜色

<resources>
    <color name="light_blue">#00bbd2</color>
    <color name="dark_blue">#0097a7</color>
    <color name="yellow">#eeff41</color>
    <color name="yellow_clicked">#50eeff41</color>
    <color name="white">#fafafa</color>
    <color name="dark_grey">#6d6d6d</color>
</resources>

activity_main.xml

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

    <!-- Toolbar -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="56dp"
        android:layout_width="match_parent"
        app:theme="@style/AppTheme"
        android:background="@color/light_blue"/>

    <!-- Main Content-->
    <RelativeLayout
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="Hello Material"/>

    </RelativeLayout>

    <ImageButton
        android:id="@+id/fab_image_button"
        android:visibility="visible"
        android:layout_width="@dimen/fab_button_diameter"
        android:layout_height="@dimen/fab_button_diameter"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="@dimen/fab_button_margin_bottom"
        android:layout_marginRight="@dimen/fab_button_margin_right"
        android:background="@drawable/fab_shape"/>
</RelativeLayout>

MainActivity

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewsById();
    }

    private void findViewsById() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("Material Design");
        ImageButton fab_image_button = (ImageButton) findViewById(R.id.fab_image_button);
        fab_image_button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Clicked", Toast.LENGTH_LONG).show();
            }
        });
    }
}

Floating Action Button在可绘制文件夹中创建一个名为fab_shape.xml的文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <layer-list>
            <!-- Shadow -->
            <item android:top="1dp" android:right="1dp">
                <layer-list>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#08000000"/>
                            <padding
                                android:bottom="3px"
                                android:left="3px"
                                android:right="3px"
                                android:top="3px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#09000000"/>
                            <padding
                                android:bottom="2px"
                                android:left="2px"
                                android:right="2px"
                                android:top="2px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#10000000"/>
                            <padding
                                android:bottom="2px"
                                android:left="2px"
                                android:right="2px"
                                android:top="2px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#11000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#12000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#13000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#14000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#15000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#16000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                </layer-list>
            </item>

            <!-- Blue button pressed -->
            <item>
                <shape android:shape="oval">
                    <solid android:color="@color/yellow_clicked"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_enabled="true">

        <layer-list>
            <!-- Shadow -->
            <item android:top="2dp" android:right="1dp">
                <layer-list>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#08000000"/>
                            <padding
                                android:bottom="4px"
                                android:left="4px"
                                android:right="4px"
                                android:top="4px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#09000000"/>
                            <padding
                                android:bottom="2px"
                                android:left="2px"
                                android:right="2px"
                                android:top="2px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#10000000"/>
                            <padding
                                android:bottom="2px"
                                android:left="2px"
                                android:right="2px"
                                android:top="2px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#11000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#12000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#13000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#14000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#15000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#16000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                </layer-list>
            </item>

            <!-- Blue button -->
            <item>
                <shape android:shape="oval">
                    <solid android:color="@color/yellow"/>
                </shape>
            </item>
        </layer-list>

    </item>
</selector>

最终结果

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9CZ3M2bi5wbmcifQ==” alt =“最终结果”>

UPDATE

这里是平板电脑的变化。

xlarge \ activity_main.xml.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eee">

    <!-- Toolbar -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="56dp"
        android:layout_width="match_parent"
        app:theme="@style/AppTheme"
        android:background="@color/light_blue"/>

    <LinearLayout
        android:id="@+id/extendedSpace"
        android:orientation="horizontal"
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="72dp"
        android:background="@color/light_blue"/>


    <!-- RecyclerView Here
    - the margin for the right and left need to greater than 88dp so it does not interfere with the floating action button
    - Just using a cardview as an example of how it would look
    -->

    <android.support.v7.widget.CardView
        android:layout_margin="88dp"
        android:layout_height="500dp"
        android:layout_width="match_parent"
        card_view:cardCornerRadius="3dp">
    </android.support.v7.widget.CardView>

    <ImageButton
        android:id="@+id/fab_image_button"
        android:visibility="visible"
        android:layout_width="@dimen/fab_button_diameter"
        android:layout_height="@dimen/fab_button_diameter"
        android:layout_alignParentTop="true"
        android:layout_marginRight="@dimen/fab_button_margin_right"
        android:layout_alignParentRight="true"
        android:layout_marginTop="100dp"
        android:background="@drawable/fab_shape"/>
</RelativeLayout>

“在此处输入图像描述”“ >>

制作其他屏幕尺寸

转到带圆圈的红色,然后选择创建“ ...”变体。如果您不知道要创建其他布局变体。干杯!!“在此处输入图像描述”
© www.soinside.com 2019 - 2024. All rights reserved.