商城项目实战 | 2.1 Android 仿京东商城——自定义

2017-03-31 本文已影响501人菜鸟窝

本文为菜鸟窝作者刘婷的连载。"商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现。

现在很多的 APP 里面都有自己的自定义风格，特别是京东商城中自定义的头部布局——自定义的 Toolbar 效果非常不错，看上去很美观，其效果图如下。

想要定义出这样的效果并不是很难，主要是要对控件的属性熟悉以及对控件的熟练使用，下面就先简单了解下 Toolbar 的基本属性以及简单使用。

什么是 Toolbar

1. Toolbar 的解释

Toolbar 是 android 5.0 引入的一个新控件，可以理解为是 ActionBar 的升级版，大大扩展了 Actionbar，使用更灵活，不像 actionbar 那么固定，Toolbar 更像是一般的View元素，可以被放置在 view 树体系的任意位置，可以应用动画，可以跟着 scrollView 滚动，可以与布局中的其他 view 交互。

2. Toolbar 的基本属性####

1. xml style属性：

colorPrimaryDark：状态栏的颜色（可用来实现沉浸效果）。
colorPrimary: Toolbar 的背景颜色（xml中用android:background=”?attr/colorPrimary”指定）。
android:textColorPrimary：Toolbar中文字的颜色，设置后Menu Item 的字体颜色也会跟随。
colorAccent：EditText 正在输入时，RadioButton 选中时的颜色。

2. xml 属性：

app:title=”App Title”：Toolbar 中的 App Title。
app:subtitle=”Sub Title” ：Toobar 中的小标题。
app:navigationIcon=”?attr/homeAsUpIndicator” ：导航图标，比如返回图标（与 Logo 不同）。

Toolbar 的简单使用

1.首先在布局 layout 文件中写入引用代码。

    <android.support.v7.widget.Toolbar
        android:id="@+id/home_toolbar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        app:navigationIcon="?attr/homeAsUpIndicator"
    </android.support.v7.widget.Toolbar>```

2.然后在 Activity 中声明定义该控件，注意 Activity 必须是继承于 AppCompatActivity。

   ```xml 
   toolbar=(Toolbar)findViewById(R.id.home_toolbar_main);```

3.声明定义之后还需要配置一下，设置 toolbar。

```xml
    setSupportActionBar(toolbar);```

4.添加标题

```xml
    setTitle("首页");```

 5.最后只要设置 Application 的 Style —— AppTheme 和 Activity 的 Style —— AppTheme.NoActionBar 就可以了，因为已经有了 Toolbar 了，替代了 ActionBar，所以在 Activity 的 Theme 中需要设置为 windowActionBar 为 false。

```xml
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!-- activity theme. -->
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>```
 
 6.效果图。

![](http:https://img.haomeiwen.com/i5205232/f8f76d9f20be8c56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

到这里 Toolbar 的基本使用就介绍完了，下一节中将会开始介绍如何自定义属于自己的 Toolbar。

>更多内容，请关注菜鸟窝（微信公众号ID: cniao5），程序猿的在线学习平台。 转载请注明出处，本文出自菜鸟窝，原文链接http://www.cniao5.com/forum/thread/8e40ee120ecf11e79ff800163e0230fa