您的位置:首页 > 其它

关于MD的学习记录(3)

2018-03-18 13:49 387 查看

3.2添加抽屉导航添加导航抽屉跟Android 5.0之前是一样的,只是以前我们使用ListView来作为菜单容器,现在我们则使用Material Design风格的RecyclerView。(14)在你工程的java文件夹中,创建3个名为activity、adapter、model的包,将MainActivity.java移到activtiy包中,这样做使得你的代码可以很好地组织和管理。(15)打开位于app模块下的build.gradle文件
4000
并添加如下依赖。添加完依赖之后,点击Build-->Rebuild Project下载所需要的类库。build.gradle(Modules:app)
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.0.0'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
(16)在model包里,创建名为NavDrawerItem.java的类,然后添加以下代码。这个模型类是一个简单的POJO(Plain Oridinary Java Object即简单的java对象)类,它定义了导航抽屉的菜单项。
NavDrawerItem.java
package androidhive.info.materialdesign.model;

public class NavDrawerItem {
private boolean showNotify;
private String title;

public NavDrawerItem() {

}

public NavDrawerItem(boolean showNotify, String title) {
this.showNotify = showNotify;
this.title = title;
}

public boolean isShowNotify() {
return showNotify;
}

public void setShowNotify(boolean showNotify) {
this.showNotify = showNotify;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}
}
(17)在res-->layout下,创建一个名为nav_drawer_row.xml的文件并添加如下代码。这个布局渲染了导航抽屉菜单的每一行,如果你想自定义抽屉菜单项,你需要修改这个布局文件。在这个例子中,它仅包含一个TextView。
nav_drawer_row.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">

<TextView
android:id="@+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="30dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textSize="15dp"
android:textStyle="bold" />

</RelativeLayout>
(18)下载个人资料图标并将它放入drawable文件夹,这一步是可选的,但是这个图标会在导航抽屉的头部用到。(19)创建另一个名为fragment_navigation_drawer.xml的布局文件并添加如下代码。这个布局文件渲染了整个导航抽屉的视图,这个布局包括一个显示个人信息的头部和一个显示列表的RecycleView。<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">

<RelativeLayout
android:id="@+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_alignParentTop="true"
android:background="@color/colorPrimary">

<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/ic_profile"
android:scaleType="fitCenter"
android:layout_centerInParent="true" />

</RelativeLayout>

<android.support.v7.widget.RecyclerView
android:id="@+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/nav_header_container"
android:layout_marginTop="15dp" />
</RelativeLayout>(20)因为RecycleView是自定义的,我们还需要一个adapter来渲染自定义的xml布局,所以在adapter包下面,创建一个名为NavigationDrawerAdapter.java的类并添加如下代码。这个适配器类inflate了nav_drawer_row.xml并渲染了RecycleView抽屉菜单。
package edu.hdu.lyy.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.Collections;
import java.util.List;

import edu.hdu.lyy.model.NavDrawerItem;
import edu.hdu.lyy.teaching.R;

/**
* Created by wch on 2018/3/18.
*/

public class NavigationDrawerAdapter extends RecyclerView.Adapter<NavigationDrawerAdapter.MyViewHolder> {
List<NavDrawerItem> data = Collections.emptyList();
private LayoutInflater inflater;
private Context context;

public NavigationDrawerAdapter(Context context, List<NavDrawerItem> data) {
this.context = context;
inflater = LayoutInflater.from(context);
this.data = data;
}

public void delete(int position) {
data.remove(position);
notifyItemRemoved(position);
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = inflater.inflate(R.layout.nav_drawer_row, parent, false);
MyViewHolder holder = new MyViewHolder(view);
return holder;
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
NavDrawerItem current = data.get(position);
holder.title.setText(current.getTitle());
}

@Override
public int getItemCount() {
return data.size();
}

class MyViewHolder extends RecyclerView.ViewHolder {
TextView title;

public MyViewHolder(View itemView) {
super(itemView);
title = (TextView) itemView.findViewById(R.id.title);
}
}
}(21)在activity包下,创建一个名为FragmentDrawer.java的Fragment。在Android Studio里面,按以下操作来创建一个新的Fragment,在activity包上右键-->New-->Fragment-->Fragment(Blank),然后给Fragment命名。
package edu.hdu.lyy.activity;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.GestureDetector;
import android.view.MotionEvent;
import java.util.ArrayList;
import java.util.List;

import edu.hdu.lyy.adapter.NavigationDrawerAdapter;
import edu.hdu.lyy.model.NavDrawerItem;
import edu.hdu.lyy.teaching.R;

public class FragmentDrawer extends Fragment {
private static String TAG = FragmentDrawer.class.getSimpleName();

private RecyclerView recyclerView;
private ActionBarDrawerToggle mDrawerToggle;
private DrawerLayout mDrawerLayout;
private NavigationDrawerAdapter adapter;
private View containerView;
private static String[] titles = null;
private FragmentDrawerListener drawerListener;

public FragmentDrawer() {

}

public void setDrawerListener(FragmentDrawerListener listener) {
this.drawerListener = listener;
}

public static List<NavDrawerItem> getData() {
List<NavDrawerItem> data = new ArrayList<>();

// preparing navigation drawer items
for (int i = 0; i < titles.length; i++) {
NavDrawerItem navItem = new NavDrawerItem();
navItem.setTitle(titles[i]);
data.add(navItem);
}
return data;
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// drawer labels
titles = getActivity().getResources().getStringArray(R.array.nav_drawer_labels);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflating view layout
View layout = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
recyclerView = (RecyclerView) layout.findViewById(R.id.drawerList);

adapter = new NavigationDrawerAdapter(getActivity(), getData());
recyclerView.setAdapter(adapter);
recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
recyclerView.addOnItemTouchListener(new RecyclerTouchListener(getActivity(), recyclerView, new ClickListener() {
@Override
public void onClick(View view, int position) {
drawerListener.onDrawerItemSelected(view, position);
mDrawerLayout.closeDrawer(containerView);
}

@Override
public void onLongClick(View view, int position) {

}
}));

return layout;
}

public void setUp(int fragmentId, DrawerLayout drawerLayout, final Toolbar toolbar) {
containerView = getActivity().findViewById(fragmentId);
mDrawerLayout = drawerLayout;
mDrawerToggle = new ActionBarDrawerToggle(getActivity(), drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActivity().invalidateOptionsMenu();
}

@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
getActivity().invalidateOptionsMenu();
}

@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
toolbar.setAlpha(1 - slideOffset / 2);
}
};

mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerLayout.post(new Runnable() {
@Override
public void run() {
mDrawerToggle.syncState();
}
});

}

public static interface ClickListener {
public void onClick(View view, int position);

public void onLongClick(View view, int position);
}

static class RecyclerTouchListener implements RecyclerView.OnItemTouchListener {

private GestureDetector gestureDetector;
private ClickListener clickListener;

public RecyclerTouchListener(Context context, final RecyclerView recyclerView, final ClickListener clickListener) {
this.clickListener = clickListener;
gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onSingleTapUp(MotionEvent e) {
return true;
}

@Override
public void onLongPress(MotionEvent e) {
View child = recyclerView.findChildViewUnder(e.getX(), e.getY());
if (child != null && clickListener != null) {
clickListener.onLongClick(child, recyclerView.getChildPosition(child));
}
}
});
}

@Override
public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {

View child = rv.findChildViewUnder(e.getX(), e.getY());
if (child != null && clickListener != null && gestureDetector.onTouchEvent(e)) {
clickListener.onClick(child, rv.getChildPosition(child));
}
return false;
}

@Override
public void onTouchEvent(RecyclerView rv, MotionEvent e) {
}
}

public interface FragmentDrawerListener {
public void onDrawerItemSelected(View view, int position);
}
}

(22)最后打开主Activity的布局文件(activity_main.xml)并按下面所示来修改布局。在这个布局里面,我们添加了android.support.v4.widget.DrawerLayout来展示导航抽屉菜单。当然在<fragment>标签里,你需要给出fragmentDrawer正确的路径。<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

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

<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
</LinearLayout>

<FrameLayout
android:id="@+id/container_body"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>

<!-- "edu.hdu.lyy.activity" need be revised as your activity packet name -->
<fragment
android:id="@+id/fragment_navigation_drawer"
android:name="edu.hdu.lyy.activity.FragmentDrawer"
android:layout_width="@dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="@layout/fragment_navigation_drawer"
tools:layout="@layout/fragment_navigation_drawer" />

</android.support.v4.widget.DrawerLayout>现在所有的布局文件和java类文件都准备到位了,让我们对MainActivity做一些修改来使导航抽屉工作起来。(23)打开MainActivity.java文件并做如下修改。>实现FragmentDrawer.FragmentDrawerListener接口并添加onDrawerItemSelected()重载。package edu.hdu.lyy.activity;

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

import edu.hdu.lyy.teaching.R;

public class MainActivity extends AppCompatActivity implements FragmentDrawer.FragmentDrawerListener{
//AppCompatActivity is out-of-date
private Toolbar mToolbar;
private FragmentDrawer drawerFragment;

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

mToolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);

drawerFragment = (FragmentDrawer)
getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
drawerFragment.setDrawerListener(this);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
@Override
public void onDrawerItemSelected(View view, int position) {

}
}现在如果你运行App,可以看到导航抽屉,在里面有一个头部视图以及一些列表项。 



完整的Demo托管在Github上,请点击这里。原文地址:点击打开链接
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Material Design