Android菜单代码
阅读原文时间:2023年07月09日阅读:1

前言:

  学习android断断续续也有一年半左右,但一直在学习,很少回顾以往的知识。所以我打算用业余时间来写一些这样总结性的文章,希望温故知新。

  以下只是我个人的一些感悟和见解(当然会查证资料验证),难免有错误之处。所以如果有不同意见,十分欢迎留言交流,再次拜谢。

简介:

  首先,此处的菜单不是Menu.它是各类菜单和导航的统称。这里包括了android的Menu、tab、slidingMenu、通过ViewPager和TitlePageIndicator的导航、自定义menu等等。

  咱们可以定义,菜单布局=选项区+内容区。

  选项区:

    选项区基本有以下几种:

      一,固定在屏幕顶部或者底部。

        

      二,隐藏在屏幕边。

         

      三,按下手机菜单键出现和隐藏。

        (这里是应用重写了Menu键的响应,改用了自己的popwindow)

      总的来说,选项区就是一些在排列上有组织的widget.

  内容区

      内容区大致可以分为两种:

      一种是“一个容器型”。容器可以是一个view(通常是一个空的布局),然后每次内容改变时,通过LayoutInflater获取一个布局的实例化或者是通过findViewById获取一个widget,返回值是view,因此直接赋值或者addView都可以。

      另一种是“多个容器型”。比如多个Activity,你没选择一项就跳转到另一个Activity.(tabActivity虽然addTab()时的setContent()方法可以传Intent,但实际上都是把每个Activity放入tabActivity局部中id为tabCotent的组件中显示,所以也可以认为是采用了“一个容器型”,虽然数据的传输上和多个Activity之间的传输一致。)

      总的来说,内容区就是一个或多个可以往里面放View的容器。

从零开始实现这些菜单:

  版本一:

      用最简单的思维看,选项区的特点是有组织,然后普遍的做法是给选中的选项加上标识(win8风格就无须这个),这就还需要选项之间互斥。要实现这些,很简单,几个Button就可以搞定。

      1,用LinearLayout把这些Button装起来。这里注意:LinearLayout的gravity只能作用于垂直当前方向的方向,即orientation为vertical的布局,layout_gravity="left"有效,layout_gravity="bottom"无效.我这里用一个LinearLayout将其挤压到底部。刚好这个LinearLayout用来放置内容区。布局如下:

1
2 7 12 16 22 28 34 40 41
42
43

      2,在OnClickListener中监听每个Button的点击,当一个Button被点击后,更改这些Button的背景实现互斥。然后每个Button对应的内容也在监听器中贴入View。

贴入布局的最简单方法是什么?当然是直接获取XML布局的实例了。代码如下(我写的逻辑部分临时给删了,请无视那些多余的import吧):

package com.zhihu.ui;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.StatusLine;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import com.zhihu.model.ObjectToXml;
import com.zhihu.model.Question;
import com.zhihu.model.QuestionHelper;
import com.zhihu.model.WtAdapter;
import com.zhihu.model.cache;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.Toast;
import android.support.v4.app.NavUtils;

public class MainActivity extends Activity implements OnClickListener{
private View wtView,qzView,scView,yhView;
private ImageButton wtImage,qzImage,scImage,yhImage;
private LayoutInflater layoutInflater;
private LinearLayout tabContent;

@Override  
public void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    setContentView(R.layout.activity\_main);  
    findViews();  
    initViews();  
}

private void initViews() {  
    // TODO Auto-generated method stub  
    wtImage.setOnClickListener(this);  
    qzImage.setOnClickListener(this);  
    scImage.setOnClickListener(this);  
    yhImage.setOnClickListener(this);  
}

private void findViews() {  
    // TODO Auto-generated method stub  
    //view of mainActivity  
    layoutInflater = getLayoutInflater().from(this);  
    tabContent = (LinearLayout) findViewById(R.id.main\_tabcontent);  
    wtImage = (ImageButton) findViewById(R.id.main\_tab\_wt);  
    qzImage = (ImageButton) findViewById(R.id.main\_tab\_qz);  
    scImage = (ImageButton) findViewById(R.id.main\_tab\_sc);  
    yhImage = (ImageButton) findViewById(R.id.main\_tab\_yh);

    //获取布局的实例化  
    wtView = layoutInflater.inflate(R.layout.main\_wt, null);  
    qzView = layoutInflater.inflate(R.layout.main\_qz, null);  
    scView = layoutInflater.inflate(R.layout.main\_sc, null);  
    yhView = layoutInflater.inflate(R.layout.main\_yh, null);  
    //初始化为显示第一个选项的内容  
    tabContent.addView(wtView);  
}

@Override  
public void onClick(View v) {  
    // TODO Auto-generated method stub  
    switch(v.getId()){  
    case R.id.main\_tab\_wt:  
        wtImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_wt\_1));  
        qzImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_qz\_0));  
        scImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_home\_0));  
        yhImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_yh\_0));  
        tabContent.removeAllViews();  
        tabContent.addView(wtView);  
        break;  
    case R.id.main\_tab\_qz:  
        wtImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_wt\_0));  
        qzImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_qz\_1));  
        scImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_home\_0));  
        yhImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_yh\_0));  
        tabContent.removeAllViews();  
        tabContent.addView(qzView);  
        break;  
    case R.id.main\_tab\_sc:  
        wtImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_wt\_0));  
        qzImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_qz\_0));  
        scImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_home\_1));  
        yhImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_yh\_0));  
        tabContent.removeAllViews();  
        tabContent.addView(scView);  
        break;  
    case R.id.main\_tab\_yh:  
        wtImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_wt\_0));  
        qzImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_qz\_0));  
        scImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_home\_0));  
        yhImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.main\_tab\_yh\_1));  
        tabContent.removeAllViews();  
        tabContent.addView(yhView);  
        break;  
    }  
}

}

       到了这步,基本完成。注意一点,在别的布局文件中的widget,findViewById时需要确定使用谁的方法。即应该用view.findViewById()。

       第一个版本基本OK,除去代码层面不说,功能上已经可以使用了。

       肯定有朋友会问,那四个Button为啥不用RadioButton来实现互斥呢?这个是下一个版本的事了。敬请关注。