• 漫谈android开发之菜单(一)


    前言:                        

      学习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 <?xml version="1.0" encoding="UTF-8"?>
     2 <LinearLayout
     3     android:layout_width="fill_parent" 
     4     android:layout_height="fill_parent"
     5     android:orientation="vertical"
     6     xmlns:android="http://schemas.android.com/apk/res/android">
     7     <LinearLayout 
     8         android:id="@+id/main_tabcontent"
     9         android:layout_width="fill_parent"
    10         android:layout_height="fill_parent"
    11         android:layout_weight="1"/>
    12     <LinearLayout 
    13         android:layout_width="fill_parent"
    14         android:layout_height="70dp"
    15         android:orientation="horizontal">
    16         <ImageButton 
    17             android:id="@+id/main_tab_wt"
    18             android:layout_width="fill_parent"
    19             android:layout_height="fill_parent"
    20             android:layout_weight="1"
    21             android:background="@drawable/main_tab_wt_1"/>
    22         <ImageButton 
    23             android:id="@+id/main_tab_qz"
    24             android:layout_width="fill_parent"
    25             android:layout_height="fill_parent"
    26             android:layout_weight="1"
    27             android:background="@drawable/main_tab_qz_0"/>
    28         <ImageButton 
    29             android:id="@+id/main_tab_yh"
    30             android:layout_width="fill_parent"
    31             android:layout_height="fill_parent"
    32             android:layout_weight="1"
    33             android:background="@drawable/main_tab_yh_0"/>
    34         <ImageButton 
    35             android:id="@+id/main_tab_sc"
    36             android:layout_width="fill_parent"
    37             android:layout_height="fill_parent"
    38             android:layout_weight="1"
    39             android:background="@drawable/main_tab_home_0"/>
    40         
    41     </LinearLayout>
    42    
    43 </LinearLayout>

          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来实现互斥呢?这个是下一个版本的事了。敬请关注。

          

  • 相关阅读:
    Spring Tool Suite 配置和使用
    自动提示在线/离线状态
    Excel数据导入数据库的SQL快速生成
    MySQL查询和删除重复数据
    内存不足时,调用ajax报的错
    订单支付成功后存储过程
    下订单存储过程
    课程表,订单表(统计报名人数),评论表(统计评论的人数),点赞表(点赞人数)
    更改浏览器的滚动条样式
    自定义文本选中样式
  • 原文地址:https://www.cnblogs.com/luomu/p/3224763.html
Copyright © 2020-2023  润新知