应用开发（二）

Posted on | |

应用开发（二）

主界面设计

顶部按钮打开菜单

原先考虑用PopWindow实现，看到一个酷炫的设计，利用Toolbar+Fragment实现。
PopWindow
Context-menu

ActionBar详解和toolbar详解

自定义Toolbar：
新建Toolbar布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="44.1dp"
    app:navigationIcon="@drawable/ic_action_back1"
    android:id="@+id/headbar"
    >

    <!-- 自定义布局 -->
    <TextView
        android:id="@+id/text_view_toolbar_title"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="#ff888888"
        android:textSize="22sp"
        android:gravity="center" />


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

自定义返回图标app:navigationIcon="@drawable/ic_action_back1"

主活动布局include Toolbar布局

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.fancy.infopush.HomeActivity">

    <include layout="@layout/headtoolbar"/>


</android.support.constraint.ConstraintLayout>

主活动中初始化Toolbar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
private void initToolbar(){
      Toolbar homehead= (Toolbar) findViewById(R.id.headbar);
      TextView mToolBarTextView = (TextView) findViewById(R.id.text_view_toolbar_title);
      setSupportActionBar(homehead);
      if(getSupportActionBar()!=null){
          getSupportActionBar().setHomeButtonEnabled(true);
          getSupportActionBar().setDisplayHomeAsUpEnabled(true);
          getSupportActionBar().setDisplayShowTitleEnabled(false);

      }
      homehead.setNavigationOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              onBackPressed();
          }
      });

      mToolBarTextView.setText("Context");
  }

Actionbar会带有一个菜单按钮，我们在menu中定制

1
2
3
4
5
6
7
8
9
10
11
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/context_menu"
        android:title="context_menu"
        android:icon="@drawable/add"
        android:orderInCategory="100"
        app:showAsAction="always" />

</menu>

可自定义图标android:icon="@drawable/add"

Toolbar的外观已修改完了，这里需要注意的是由于默认的样式中自带有Actionbar，所以我们需要修改一下样式，继承不带Actionbar的theme

1
2
3
4
5
6
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="android:colorBackground">@android:color/darker_gray</item>
        <item name="android:windowBackground">@android:color/background_light</item>
</style>

在菜单响应中，为了显示酷炫的效果mMenuDialogFragment.show(fragmentManager, ContextMenuDialogFragment.TAG);我们需要初始化mMenuDialogFragment

1
2
3
4
5
6
7
8
9
private void initMenuFragment() {
        MenuParams menuParams = new MenuParams();
        menuParams.setActionBarSize((int) getResources().getDimension(R.dimen.tool_bar_height));
        menuParams.setMenuObjects(getMenuObjects());
        menuParams.setClosableOutside(false);
        mMenuDialogFragment = ContextMenuDialogFragment.newInstance(menuParams);
        mMenuDialogFragment.setItemClickListener(this);
        mMenuDialogFragment.setItemLongClickListener(this);
    }

menuParams.setMenuObjects(getMenuObjects());
设置菜单内容，我们将MenuObject设置图标后放入List<MenuObject>即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 private List<MenuObject> getMenuObjects() {

        List<MenuObject> menuObjects = new ArrayList<>();

        MenuObject close = new MenuObject();
        close.setResource(R.drawable.ic_action_close);

        MenuObject addFav = new MenuObject("Add to favorites");
        addFav.setResource(R.drawable.ic_action_like);

        MenuObject block = new MenuObject("Block user");
        block.setResource(R.drawable.ic_action_up);

        menuObjects.add(close);
        menuObjects.add(addFav);
        menuObjects.add(block);
        return menuObjects;
}

效果展示：

toolbar-c500