Android底部菜单栏实现问题

心有未来 发布于 2013/04/15 07:31
阅读 10K+
收藏 2

虽说不是太喜欢玩Java相关,但最近还是玩了玩Android。无意中见到美团的底部菜单挺不错的,好吧我也试试做一个,于是乎遇到问题了。

前面都是废话 :)  进入正题:我用LinearLayout配合ImageView与TextView实现了底部菜单效果,但在处理事件上没想法了...不知道咋实现TabHost那样的的切换效果,每一个选项对应一个Activity,但底部菜单是需要一直存在的,这个我想你懂的:), 谁做个这个,望指点一二?

感谢!

<!-- MenuBar.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_menu"
    android:orientation="horizontal" >

    <RelativeLayout
        android:id="@+id/menu_deal"
        android:layout_width="119sp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/bg_bottom_menu_selected"
        android:orientation="vertical" >
		
        <ImageView 
            android:id="@+id/menu_deal_bg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/ic_menu_deal_on"
            android:contentDescription="@string/description" />
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            
            android:gravity="center"
            android:layout_below="@id/menu_deal_bg"
            android:textColor="#8E8E8E"
            android:text="@string/menu_deal" />
    </RelativeLayout>
	
    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description" />
    
    <RelativeLayout
        android:id="@+id/menu_around"
        android:layout_width="119sp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >
		
        <ImageView 
            android:id="@+id/menu_around_bg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/ic_menu_around_off"
            android:contentDescription="@string/description" />
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
         	android:layout_below="@id/menu_around_bg"
            android:textColor="#8E8E8E"
            android:text="@string/menu_around" />
    </RelativeLayout>
	
    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description" />
    
    <RelativeLayout
        android:id="@+id/menu_user"
        android:layout_width="119sp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical" >
		
        <ImageView 
            android:id="@+id/menu_user_bg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/ic_menu_user_off"
            android:contentDescription="@string/description" />
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:layout_below="@id/menu_user_bg"
            android:textColor="#8E8E8E"
            android:text="@string/menu_user" />
    </RelativeLayout>
	
    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description" />
    
    <RelativeLayout
        android:id="@+id/menu_more"
        android:layout_width="119sp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >
		
        <ImageView 
            android:id="@+id/menu_more_bg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/ic_menu_more_off"
            android:contentDescription="@string/description" />
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:layout_below="@id/menu_more_bg"
            android:textColor="#8E8E8E"
            android:text="@string/menu_more" />
    </RelativeLayout>

</LinearLayout>
//......MainActivity.java menu event process
menu_deal_bg = (ImageView)findViewById(R.id.menu_deal_bg);
		menu_around_bg = (ImageView)findViewById(R.id.menu_around_bg);
		menu_user_bg = (ImageView)findViewById(R.id.menu_user_bg);
		menu_more_bg = (ImageView)findViewById(R.id.menu_more_bg);
		
		menu_deal = (RelativeLayout)findViewById(R.id.menu_deal);
		menu_deal.setOnClickListener(new OnClickListener(){

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				menu_deal.setBackgroundResource(R.drawable.bg_bottom_menu_selected);
				menu_around.setBackgroundResource(0);
				menu_user.setBackgroundResource(0);
				menu_more.setBackgroundResource(0);
				
				menu_deal_bg.setBackgroundResource(R.drawable.ic_menu_deal_on);
				menu_around_bg.setBackgroundResource(R.drawable.ic_menu_around_off);
				menu_user_bg.setBackgroundResource(R.drawable.ic_menu_user_off);
				menu_more_bg.setBackgroundResource(R.drawable.ic_menu_more_off);
				
			}
			
		});
		menu_around = (RelativeLayout)findViewById(R.id.menu_around);
		menu_around.setOnClickListener(new OnClickListener(){

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				menu_deal.setBackgroundResource(0);
				menu_around.setBackgroundResource(R.drawable.bg_bottom_menu_selected);
				menu_user.setBackgroundResource(0);
				menu_more.setBackgroundResource(0);
				
				menu_deal_bg.setBackgroundResource(R.drawable.ic_menu_deal_off);
				menu_around_bg.setBackgroundResource(R.drawable.ic_menu_around_on);
				menu_user_bg.setBackgroundResource(R.drawable.ic_menu_user_off);
				menu_more_bg.setBackgroundResource(R.drawable.ic_menu_more_off);
				
				Intent intent = new Intent();
				intent.setClass(MainActivity.this, AroundActivity.class);
				startActivity(intent);
			}
			
		});
		menu_user = (RelativeLayout)findViewById(R.id.menu_user);
		menu_user.setOnClickListener(new OnClickListener(){

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				menu_deal.setBackgroundResource(0);
				menu_around.setBackgroundResource(0);
				menu_user.setBackgroundResource(R.drawable.bg_bottom_menu_selected);
				menu_more.setBackgroundResource(0);
				
				menu_deal_bg.setBackgroundResource(R.drawable.ic_menu_deal_off);
				menu_around_bg.setBackgroundResource(R.drawable.ic_menu_around_off);
				menu_user_bg.setBackgroundResource(R.drawable.ic_menu_user_on);
				menu_more_bg.setBackgroundResource(R.drawable.ic_menu_more_off);
			}
			
		});
		menu_more = (RelativeLayout)findViewById(R.id.menu_more);
		menu_more.setOnClickListener(new OnClickListener(){

			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				menu_deal.setBackgroundResource(0);
				menu_around.setBackgroundResource(0);
				menu_user.setBackgroundResource(0);
				menu_more.setBackgroundResource(R.drawable.bg_bottom_menu_selected);
				
				menu_deal_bg.setBackgroundResource(R.drawable.ic_menu_deal_off);
				menu_around_bg.setBackgroundResource(R.drawable.ic_menu_around_off);
				menu_user_bg.setBackgroundResource(R.drawable.ic_menu_user_off);
				menu_more_bg.setBackgroundResource(R.drawable.ic_menu_more_on);
			}
			
		});
//.....


加载中
0
尐帥鱼
尐帥鱼
实现TabHost那样的效果,这个自己实现一个吧,应该不难感觉和我这个有点像
心有未来
心有未来
回复 @陈海刚 : 先参考下开源中国的客户端,再尝试下..感谢!
尐帥鱼
尐帥鱼
就这样写的,也能实现页面切换 middleLinearLayout.removeAllViews(); middleLinearLayout.addView(sv.getView(),0); middleLinearLayout.setGravity(gravity);
尐帥鱼
尐帥鱼
回复 @心有未来 : 我这里只放三个普通按钮也能实现这样的功能,我是在上面的inearLayout中切换View而已
心有未来
心有未来
你的这个是可以在Setting、Status、Enable这个页面切换而底部菜单一直存在吗?如果行,求源码 : ) 感谢!
0
叶大侠
叶大侠
参考一下开元中国的客户端吧, http://www.oschina.net/app.它的tab就是这种原理实现的.
心有未来
心有未来
非常感谢,参考下下... 真心的感觉还是C/C++好玩 : )
0
尐帥鱼
尐帥鱼
把事件设置在LinearLayout上
心有未来
心有未来
表示你似乎理解错问题了 : ( 事件是在RelativeLayout上。现在的问题是实现TabHost那样的菜单项切换,因为TabHost从3.0开始就不推荐了...而官方推荐的替换时Fragment 功能太强 还不会用.....
0
杰乐优
杰乐优

最新推荐试用的是Fragment,这个我还不会,要努力学习了。

0
chengxiaobo
chengxiaobo

引用来自“陈海刚”的答案

实现TabHost那样的效果,这个自己实现一个吧,应该不难感觉和我这个有点像
他说的很对的。通常都是View=inflate(充气) 完了,得到View,之后 中间部分比如是个LinnerLayout ll ll.remove.allView(); ll.addView(view) 
0
色魔张大妈
色魔张大妈
RadioGroup+ViewGroup
0
石玉成
你可以用 FragmentTabsPager 来实现  或者用tabhost+radiogroup来实现  再有就是楼上的方法!
0
等待流星

用tabHost加radioGroup:

代码:

package cn.com.ccec.wuliu;


import android.app.TabActivity;


import android.content.Intent;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TabHost;
import android.widget.RadioGroup.OnCheckedChangeListener;


public class WuliuActivity extends TabActivity {


private RadioGroup group;
private TabHost tabHost;
public static final String BROWER = "brower";
public static final String SEARCH = "search";
public static final String FABU = "fabu";
public static final String MORE = "more";


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// 底部菜单组
group = (RadioGroup) findViewById(R.id.main_radio);
tabHost = getTabHost();
// 浏览
tabHost.addTab(tabHost.newTabSpec(BROWER).setIndicator(BROWER)
.setContent(new Intent(this, Weather.class)));
// 搜索
tabHost.addTab(tabHost.newTabSpec(SEARCH).setIndicator(SEARCH)
.setContent(new Intent(this, SearchResultByMap.class)));
// 发布
tabHost.addTab(tabHost.newTabSpec(FABU).setIndicator(FABU)
.setContent(new Intent(this, SearchOption.class)));
// 更多
tabHost.addTab(tabHost.newTabSpec(MORE).setIndicator(MORE)
.setContent(new Intent(this, More.class)));


// 默认为浏览
tabHost.setCurrentTab(0);
RadioButton radioButton = (RadioButton) findViewById(R.id.brower);
radioButton.setChecked(true);


// // 设置监听
group.setOnCheckedChangeListener(new OnCheckedChangeListener() {
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.brower:
tabHost.setCurrentTabByTag(BROWER);
break;
case R.id.search:
tabHost.setCurrentTabByTag(SEARCH);
break;
case R.id.fabu:
tabHost.setCurrentTabByTag(FABU);
break;
case R.id.more:
tabHost.setCurrentTabByTag(MORE);
break;
default:
break;
}
}
});
}


}



布局:

<?xml version="1.0" encoding="UTF-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android :id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" 
        android:background="#ffff00">


        <FrameLayout
            android:id="@android :id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0.0dip"
            android:layout_weight="1.0" />


        <TabWidget
            android:id="@android :id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.0"
            android:visibility="gone" />


        <RadioGroup
            android:paddingTop="4dp"
            android:paddingRight="35dp"
            android:id="@+id/main_radio"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@drawable/tab_bkg"
            android:gravity="center_vertical"
            android:orientation="horizontal" >


            <RadioButton
                android:id="@+id/brower"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/brower_state"
                android:tag="brower"
                android:text="娴忚" />


            <RadioButton
                android:id="@+id/search"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/search_state"
                android:tag="search"
                android:text="鎼滅储" />


            <RadioButton
                android:id="@+id/fabu"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/fabu_state"
                android:tag="fabu"
                android:text="鍙戝竷" />


            <RadioButton
                android:id="@+id/more"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/more_state"
                android:tag="more"
                android:text="鏇村" />
        </RadioGroup>
    </LinearLayout>


</TabHost>

注:由于从android3.0就不建议使用TabActivity,其实实现这样的效果现在最好用ActionBar,希望对你有帮助。

dos_沐歌
dos_沐歌
@等待流星 额,我使用tabhost做的,actionBar我试了一下,效果不佳~
dos_沐歌
dos_沐歌
@等待流星 这个我已经弄出来了89
等待流星
@dos_沐歌 这个就需要改Framwork 了
dos_沐歌
dos_沐歌
ActionBar 好像不能一直停留在底部样。。。。
返回顶部
顶部