我将如何实现Google的默认材质示例
因此，在google.com/design Google上使用以下模型：
我如何存档这样的内容？ 它显然使用Fragments，我猜想支持库中的Cardsview / Recyclerview小部件。
但我没有设法存档以这种方式呈现我的内容的设计。是否有某种默认模板可以让我入门？你有什么提示吗？ 互联网上有许多片段教程，但没有一个像模型那样使用精确的材料设计。
我是Android开发的新手（但不是一般的开发）并希望遵循官方指南，但似乎很难实现。 从Google到我可以使用Google I / O应用程序的一些代码的唯一参考，但这相当复杂。我无法理解为什么Google不会提供一个默认模板，其中包含所有那些可以作为修补基础的好材料主题元素。
1 个答案:
答案 0 :(得分：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();
}
});
}
}
浮动操作按钮在名为fab_shape.xml的drawables文件夹中创建文件
<?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>
最终结果
<强>更新
这是Tablet Variation。
<强> 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>
制作其他屏幕尺寸
转到带圆圈的红色并选择Create“...”Variation。如果您不知道要创建其他布局变体。干杯！！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？