如何在Android中构建自定义“导航”侧边栏

时间:2016-05-25 11:54:23

标签: android android-layout

我正在构建一个Android应用程序,与创建该设计的iOS开发人员合作。它应该使用两个侧面菜单,能够从左或右滑入。现在,我在DrawerLayout中创建了两个NavigationView(带有支持库)。是否可以在此侧边栏中包含除列表视图之外的其他元素,如滑块或ImageView?

Look at the design here.

4 个答案:

答案 0 :(得分:0)

  

是否可以在此侧边栏中包含除列表视图之外的其他元素,如滑块或ImageView?

如果我没记错的话,是的。 当我开始学习NavigationViews& DrawerLayout我通过this博客文章阅读。如果DrawLayout是根元素,您应该能够添加除ListView之外的其他子元素,但我建议您自己仔细阅读。

答案 1 :(得分:0)

您可以使用Android的笔布局。它提供了标题栏(如带抽屉打开的操作栏)带抽屉的移动。

答案 2 :(得分:0)

您可以自定义NavigationViews和Drawerlayouts 检查以下链接

Android Custom Navigation Drawer
Navigation Drawer

答案 3 :(得分:0)

您可以使用以下3个类创建:

1.NavigationDrawerItem

public class NavigationDrawerItem {

private String title;
private int imageId;
private int layoutId;

public int getLayoutId() {
    return layoutId;
}

public void setLayoutId(int layoutId) {
    this.layoutId = layoutId;
}

public String getTitle() {
    return title;
}

public void setTitle(String title) {
    this.title = title;
}

public int getImageId() {
    return imageId;
}

public void setImageId(int imageId) {
    this.imageId = imageId;
}

public static List<NavigationDrawerItem> getData() {
    List<NavigationDrawerItem> dataList = new ArrayList<>();

    int[] imageIds = getImages();
    String[] titles = getTitles();
    int[] ids = getId();

    for (int i = 0; i < titles.length; i++) {
        NavigationDrawerItem navItem = new NavigationDrawerItem();
        navItem.setTitle(titles[i]);
        navItem.setImageId(imageIds[i]);
        navItem.setLayoutId(ids[i]);
        dataList.add(navItem);
    }
    return dataList;
}

private static int[] getId() {
       return new int[] {0};
}

private static int[] getImages() {

    return new int[]{R.drawable.icon_settings};
}

private static String[] getTitles() {

    return new String[] {"Settings"};
}}

2.NavigationDrawerAdapter

public class NavigationDrawerAdapter extends RecyclerView.Adapter<NavigationDrawerAdapter.MyViewHolder> {

private List<NavigationDrawerItem> mDataList = Collections.emptyList();
private LayoutInflater inflater;
private Context context;
public  int drawerOnclickID;

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

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

@Override
public void onBindViewHolder(final MyViewHolder holder, int position) {
    NavigationDrawerItem current = mDataList.get(position);

    holder.imgIcon.setImageResource(current.getImageId());
    holder.title.setText(current.getTitle());
    drawerOnclickID = current.getLayoutId();
    holder.itemView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(context, holder.title.getText().toString(), Toast.LENGTH_SHORT).show();
        }
    });
    holder.setListener();

}

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

class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
    TextView title;
    ImageView imgIcon;
    LinearLayout linearLayout;

    public MyViewHolder(View itemView) {
        super(itemView);
        title = (TextView) itemView.findViewById(R.id.title);
        imgIcon = (ImageView) itemView.findViewById(R.id.imgIcon);
        linearLayout = (LinearLayout) itemView.findViewById(R.id.linearlayout_drawer_listener);
    }


    public void setListener() {
        linearLayout.setOnClickListener(MyViewHolder.this);
    }


    @Override
    public void onClick(View v) {
        final Intent intent;


        switch (drawerOnclickID){


            case 0:
                intent = new Intent(context,Settings.class);
                break;
            default:
                intent = new Intent(context,MainActivity.class);
                break;
        }
        context.startActivity(intent);
    }
}}

3.NavigationDrawerFragment

public class NavigationDrawerFragment extends Fragment {

private ActionBarDrawerToggle mDrawerToggle;
private DrawerLayout mDrawerLayout;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);

    setUpRecyclerView(view);

    return view;
}

private void setUpRecyclerView(View view) {

    RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.drawerList);

    NavigationDrawerAdapter adapter = new NavigationDrawerAdapter(getActivity(), NavigationDrawerItem.getData());
    recyclerView.setAdapter(adapter);
    recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
}

public void setUpDrawer(int fragmentId, DrawerLayout drawerLayout, Toolbar toolbar) {
    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);
            // Do something of Slide of Drawer`
        }
    };

    mDrawerLayout.setDrawerListener(mDrawerToggle);

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

MainActivity onCreate

        setUpDrawer();

setUpDrawer

private void setUpDrawer() {
    NavigationDrawerFragment     drawerFragment = (NavigationDrawerFragment) getSupportFragmentManager().findFragmentById(R.id.nav_drwr_fragment);
    DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawerFragment.setUpDrawer(R.id.nav_drwr_fragment,drawerLayout,toolbar);
}

XML

1.fragment_navigation_drawer.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">

<android.support.v7.widget.RecyclerView
    android:id="@+id/drawerList"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"/>

2.nav_drawer_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="48dp"
android:clickable="true"
android:id="@+id/linearlayout_drawer_listener"
android:gravity="center"
android:background="?attr/selectableItemBackground">
<ImageView
    android:id="@+id/imgIcon"
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:src="@drawable/icon_play"
    android:tint="@color/grey_500" />

<TextView
    android:id="@+id/title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="16dp"
    android:layout_marginLeft="16dp"
    android:textColor="@android:color/black"
    android:textSize="14sp"   />

最后在activity_main.xml

<android.support.v4.widget.DrawerLayout

    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<fragment
        android:id="@+id/nav_drwr_fragment"
        android:name="com.example.sobi.speedcamera.app.NavigationDrawerFragment"
        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>