知乎是一个我比较喜欢的app,里面的内容也很好。因为自己在学习Android,所以就想仿一下,看一下自己能不能实现。做了半个月,大体上实现了一下其中的功能,下面是简单的操作,(不要注意细节 - -|||)
是不是已经很像了。里面的数据是调用远程数据库中的数据,没有在手机中使用本地数据库。做程序累所以找了一些不让自己累的数据。哇哈哈。。。。。。
下面我就一步一步的把我做的每一个过程记录下来,算是对学习 android的一个笔记吧。
这里使用了android 5.0的一些控件,所以SDK我升级到了22。也许有人会说,这样是不是有一些低版本的手机就使用不了呢,这些新的控件官方说明是兼容到2.1。所以我感觉这个应该不是问题。
好了,我们先把一进来的首页架起来。这里面使用了Toolbar控件,DrawerLayout控件。
为什么使用toolbar而不使用 actionBar 呢。这里面有两个原因,一是google说toolbar是取代actionbar的,而且比 actionbar更灵活。另一个,看到左上角哪个可动的图标了吗,用toolbar可以直接就实现了,不用第三方插件了。
DrawerLayout的使用,主要是为了,可以从左侧拉出菜单来。
下面我就一步一步的把这个实现出来。
先来看一下activity_main.xml文件:
样式加完,我们在AndroidManifest.xml中添加此样式
2,菜单使用listView,代码如下:listview中的item页面代码:
fragment_main_drawer_item.xml
这里面的android:background="@drawable/main_drawer_background"主要是在点击菜单时,改变背景色
main_drawer_background.xml
android:state_enabled="false"android:color="#ff999999"/> android:state_activated="true"android:color="@android:color/white" /> android:color="#636363" />现在item已经有了,哪么我们就为这个菜单列表写一个adapterMain_Drawer_lv_Adapter.java
- import android.content.Context;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.BaseAdapter;
- import android.widget.ImageView;
- import android.widget.TextView;
- import com.example.cg.zhihu_one.R;
- import com.example.cg.zhihu_one.models.MainDrawerMenu;
- import java.util.List;
- /**
- * 左侧侧滑菜单的adpter
- * Created by cg on 2015/10/26.
- */
- public class Main_Drawer_lv_Adapter extends BaseAdapter {
- private LayoutInflater inflater;
- private List
list_menu; //菜单名称与图标的list,采用了一个类- public Main_Drawer_lv_Adapter(Context context,List
list_menu) { - inflater = LayoutInflater.from(context);
- this.list_menu = list_menu;
- }
- @Override
- public int getCount() {
- return list_menu.size();
- }
- @Override
- public Object getItem(int position) {
- return list_menu.get(position);
- }
- @Override
- public long getItemId(int position) {
- return position;
- }
- @Override
- public View getView(int position, View convertView, ViewGroup parent) {
- menuItem mItem;
- if(convertView==null)
- {
- convertView = inflater.inflate(R.layout.fragment_main_drawer_item,null);
- mItem = new menuItem();
- mItem.icon = (ImageView)convertView.findViewById(R.id.item_icon);
- mItem.title = (TextView)convertView.findViewById(R.id.item_title);
- convertView.setTag(mItem);
- }else{
- mItem = (menuItem)convertView.getTag();
- }
- mItem.icon.setImageResource(list_menu.get(position).getMainDrawer_icon());
- mItem.title.setText(list_menu.get(position).getMainDrawer_menuName());
- return convertView;
- }
- public class menuItem
- {
- ImageView icon;
- TextView title;
- }
- }
这里面为了将图标和文字传入,我建立了一个model类。MainDrawerMenu.java
- /**
- * 左侧侧滑菜单内容类
- * Created by cg on 2015/10/23.
- */
- public class MainDrawerMenu {
- private int mainDrawer_icon; //菜单的图标
- private String mainDrawer_menuName; //菜单的名称
- public MainDrawerMenu() {
- }
- public MainDrawerMenu(int mainDrawer_icon, String mainDrawer_menuName) {
- this.mainDrawer_icon = mainDrawer_icon;
- this.mainDrawer_menuName = mainDrawer_menuName;
- }
- /**
- * 得到菜单图标
- * @return
- */
- public int getMainDrawer_icon() {
- return mainDrawer_icon;
- }
- /**
- * 设置菜单图标
- * @param mainDrawer_icon
- */
- public void setMainDrawer_icon(int mainDrawer_icon) {
- this.mainDrawer_icon = mainDrawer_icon;
- }
- /**
- * 得到菜单名称
- * @return
- */
- public String getMainDrawer_menuName() {
- return mainDrawer_menuName;
- }
- /**
- * 设置菜单名称
- * @param mainDrawer_menuName
- */
- public void setMainDrawer_menuName(String mainDrawer_menuName) {
- this.mainDrawer_menuName = mainDrawer_menuName;
- }
- }
现在布局有了,圆形图搞定,listview的item布局和adapter也完事了,下面就把这些整合起来吧.tool_NavigationDrawerFragment.java
- import android.app.Fragment;
- import android.content.res.TypedArray;
- import android.os.Bundle;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.AdapterView;
- import android.widget.ListView;
- import com.example.cg.zhihu_one.Adapters.Main_Drawer_lv_Adapter;
- import com.example.cg.zhihu_one.models.MainDrawerMenu;
- import java.util.ArrayList;
- import java.util.List;
- /**
- * 左侧侧滑页面
- * Created by cg on 2015/10/23.
- */
- public class tool_NavigationDrawerFragment extends Fragment {
- private ListView lv_main_drawer_leftmenu; //定义菜单的listView
- private List
list_menu; - /**
- * 设置菜单点击接口,以方便外部Activity调用
- */
- public interface menuClickListener
- {
- void menuClick(String menuName);
- }
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
- View view = inflater.inflate(R.layout.fragment_main_drawer,container,false);
- initleftMenuContral(view);
- return view;
- }
- /**
- * 初始化左侧菜单列表listView,并为菜单,设置点击事件
- * @param view
- */
- private void initleftMenuContral(View view) {
- lv_main_drawer_leftmenu = (ListView)view.findViewById(R.id.lv_main_drawer_leftmenu);
- list_menu = getMenuItem();
- lv_main_drawer_leftmenu.setAdapter(new Main_Drawer_lv_Adapter(getActivity(),list_menu));
- lv_main_drawer_leftmenu.setOnItemClickListener(new AdapterView.OnItemClickListener() {
- @Override
- public void onItemClick(AdapterView> parent, View view, int position, long id) {
- if(getActivity() instanceof menuClickListener)
- {
- ((menuClickListener)getActivity()).menuClick(list_menu.get(position).getMainDrawer_menuName());
- }
- }
- });
- }
- /**
- * 从arrays.xml中取出数据,装入list
中 - * @return
- */
- private List
getMenuItem() - {
- List
list_menu = new ArrayList (); - String[] itemTitle = getResources().getStringArray(R.array.item_title);
- TypedArray itemIconRes = getResources().obtainTypedArray(R.array.item_icon_res);
- for(int i=0;i
- {
- MainDrawerMenu lmi = new MainDrawerMenu();
- lmi.setMainDrawer_icon(itemIconRes.getResourceId(i,0));
- lmi.setMainDrawer_menuName(itemTitle[i]);
- list_menu.add(lmi);
- }
- return list_menu;
- }
- }
这里说明一点,这里的菜单名和图标,我采用的是在values文件夹建立了一个arrays.xml文件,把这些值写在了这里。
- xml version="1.0" encoding="utf-8"?>
- <resources>
- <string-array name="item_title">
- <item>首页item>
- <item>发现item>
- <item>关注item>
- <item>收藏item>
- <item>草稿item>
- <item>提问item>
- string-array>
- <integer-array name="item_icon_res">
- <item>@drawable/ic_drawer_home_normalitem>
- <item>@drawable/ic_drawer_explore_normalitem>
- <item>@drawable/ic_drawer_follow_normalitem>
- <item>@drawable/ic_drawer_collect_normalitem>
- <item>@drawable/ic_drawer_draft_normalitem>
- <item>@drawable/ic_drawer_question_normalitem>
- integer-array>
- resources>
到这里,我们的toolbar,左侧菜单都已经建立完成了,我们来运行一下看一下效果。左侧菜单没问题,已经实现了我们的想法,可是这个toolbar上面,处了背景色以外,什么都没有,这是什么情况呢,这是因为我们还没有给toolbar进行设置,好了, 我们来看一下MainActivity.java的代码.
- import android.os.Bundle;
- import android.support.v4.widget.DrawerLayout;
- import android.support.v7.app.ActionBarDrawerToggle;
- import android.support.v7.app.AppCompatActivity;
- import android.support.v7.widget.Toolbar;
- import android.view.Menu;
- import android.view.MenuItem;
- public class MainActivity extends AppCompatActivity {
- private Toolbar toolbar; //定义toolbar
- private ActionBarDrawerToggle mDrawerToggle; //定义toolbar左上角的弹出左侧菜单按钮
- private DrawerLayout drawer_main; //定义左侧滑动布局,其实就是主布局
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- initToolbar();
- }
- /**
- * 初始化Toolbar,并设置Toolbar中的菜单与标题,并与DrawerLayout.DrawerListener相关联,设置动态图标
- */
- public void initToolbar()
- {
- toolbar = (Toolbar)this.findViewById(R.id.toolbar);
- toolbar.setTitle("首页"); // 标题的文字需在setSupportActionBar之前,不然会无效
- setSupportActionBar(toolbar);
- //为了生成,工具栏左上角的动态图标,要使用下面的方法
- drawer_main = (DrawerLayout) findViewById(R.id.drawer_main);
- mDrawerToggle = new ActionBarDrawerToggle(this, drawer_main, toolbar, R.string.drawer_open,
- R.string.drawer_close);
- mDrawerToggle.syncState();
- drawer_main.setDrawerListener(mDrawerToggle);
- }
- @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. main_toolbar_shuffle) {
- return true;
- }
- return super.onOptionsItemSelected(item);
- }
- }
这里,我们还要在menu_main.xml中设置在toolbar上的菜单,代码如下:
- <menu 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" tools:context=".MainActivity">
- <item
- android:id="@+id/main_toolbar_shuffle"
- android:title="@string/menu_shuffle"
- android:icon="@drawable/ic_action_shuffle"
- app:showAsAction="always" />
- <item
- android:id="@+id/main_toolbar_search"
- android:title="@string/menu_search"
- android:icon="@drawable/ic_action_search"
- app:showAsAction="always"/>
- <item
- android:id="@+id/main_toolbar_notify"
- android:title="@string/menu_notify"
- android:icon="@drawable/ic_action_notify"
- app:showAsAction="always" />
- <item
- android:id="@+id/main_toolbar_about"
- android:title="@string/menu_about"
- app:showAsAction="never" />
- <item
- android:id="@+id/main_toolbar_register"
- android:title="@string/menu_register"
- app:showAsAction="never" />
- menu>
为了方便我们修改菜单名和可以重复使用,我们把文字放到了strings.xml中
- <string name="menu_index">首页string>
- <string name="menu_search">查询string>
- <string name="menu_notify">通知string>
- <string name="menu_about">关于string>
- <string name="menu_register">登出string>
- <string name="menu_share">分享string>
- <string name="menu_shuffle">随机看string>
好了,这回我们再运行一下,看一下效果:下载地址:http://download.csdn.net/detail/chenguang79/9215873
转自:http://blog.csdn.net/chenguang79/article/details/49444787