Android仿微信底部菜单
2012-09-12 20:12
393 查看
2012-4-19 17:08 上传
下载附件
(103.57 KB)
就下面的那个底部栏,下面看一下实现代码吧!
首先是布局main.xml:
<?xml version="1.0" encoding="UTF-8"?>
<TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
<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:visibility="gone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0" />
<LinearLayout android:gravity="bottom" android:layout_gravity="bottom" android:orientation="horizontal" android:id="@+id/main_tab_group" android:background="@drawable/bottom1" android:paddingTop="2.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content">
<FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
<LinearLayout android:id="@+id/main_layout_addExam" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">
<RadioButton android:id="@+id/main_tab_addExam" android:checked="true" android:text="添加考试" android:drawableTop="@drawable/label_1" style="@style/MMTabButton" />
</LinearLayout>
<LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
<TextView android:textSize="10.0dip" android:text="1" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_unread_tv" android:background="@drawable/new_icon_2" android:visibility="invisible" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
<FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
<LinearLayout android:id="@+id/main_layout_myExam" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">
<RadioButton android:id="@+id/main_tab_myExam" android:text="我的考试" android:drawableTop="@drawable/label_2" style="@style/MMTabButton" />
</LinearLayout>
<LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
<TextView android:textSize="10.0dip" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_address" android:background="@drawable/new_icon_2" android:visibility="invisible" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="1" />
</LinearLayout>
</FrameLayout>
<FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
<LinearLayout android:id="@+id/main_layout_message" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">
<RadioButton android:id="@+id/main_tab_message" android:text="考试资讯" android:drawableTop="@drawable/label_3" style="@style/MMTabButton" />
</LinearLayout>
<LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
<TextView android:textSize="12.0dip" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_new_tv" android:background="@drawable/new_icon_2" android:visibility="visible" android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="1" />
</LinearLayout>
</FrameLayout>
<FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
<LinearLayout android:id="@+id/main_layout_settings" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">
<RadioButton android:id="@+id/main_tab_settings" android:text="设置" android:drawableTop="@drawable/label4" style="@style/MMTabButton" />
</LinearLayout>
<LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
<TextView android:textSize="10.0dip" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_setting_new_tv" android:background="@drawable/new_icon_2" android:paddingLeft="6.0dip" android:paddingRight="6.0dip"
android:visibility="invisible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</LinearLayout>
</TabHost>
复制代码
[align=left] 其实就是用FrameLayout,微信也是这样布局的我反编译过。这样就可以灵活的布局那个红色的图标了。[/align]
下面看一下activity切换代码:
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.TabHost;
import android.widget.TextView;
public class MainTabActivity extends TabActivity {
TabHost tabHost;
private TextView main_tab_unread_tv;
private RadioButton main_tab_addExam, main_tab_myExam,main_tab_message,main_tab_settings;
private LinearLayout main_layout_addExam,main_layout_myExam,main_layout_message,main_layout_settings;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
initTab();
init();
}
private void init() {
main_tab_addExam = (RadioButton) findViewById(R.id.main_tab_addExam);
main_tab_myExam = (RadioButton) findViewById(R.id.main_tab_myExam);
main_tab_message=(RadioButton) findViewById(R.id.main_tab_message);
main_tab_settings=(RadioButton) findViewById(R.id.main_tab_settings);
main_layout_addExam=(LinearLayout) findViewById(R.id.main_layout_addExam);
main_layout_myExam=(LinearLayout) findViewById(R.id.main_layout_myExam);
main_layout_message=(LinearLayout) findViewById(R.id.main_layout_message);
main_layout_settings=(LinearLayout) findViewById(R.id.main_layout_settings);
main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_one_one), null, null);
main_layout_addExam.setBackgroundResource(R.drawable.labelbg);
main_tab_unread_tv=(TextView) findViewById(R.id.main_tab_unread_tv);
//main_tab_unread_tv.setVisibility(View.VISIBLE);
//main_tab_unread_tv.setText("3");
main_tab_addExam.setOnClickListener(new OnClickListener() {
public void onClick(View arg0) {
tabHost.setCurrentTabByTag("first");
/*main_tab_addExam.setBackgroundResource(R.drawable.label_one_one);
main_tab_myExam.setBackgroundResource(R.drawable.label_2);
main_tab_message.setBackgroundResource(R.drawable.label_3);*/
//main_tab_addExam.setCompoundDrawables(null, getResources().getDrawable(R.drawable.label_one_one), null, null);
main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_one_one), null, null);
main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null);
main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);
main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);
main_layout_addExam.setBackgroundResource(R.drawable.labelbg);
main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);
main_layout_message.setBackgroundResource(R.drawable.mm_trans);
main_layout_settings.setBackgroundResource(R.drawable.mm_trans);
}
});
main_tab_myExam.setOnClickListener(new OnClickListener() {
public void onClick(View arg0) {
tabHost.setCurrentTabByTag("second");
/*main_tab_addExam.setBackgroundResource(R.drawable.label_1);
main_tab_myExam.setBackgroundResource(R.drawable.label_two_one);
main_tab_message.setBackgroundResource(R.drawable.label_3);*/
main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null);
main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_two_one), null, null);
main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);
main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);
main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);
main_layout_myExam.setBackgroundResource(R.drawable.labelbg);
main_layout_message.setBackgroundResource(R.drawable.mm_trans);
main_layout_settings.setBackgroundResource(R.drawable.mm_trans);
}
});
main_tab_message.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
tabHost.setCurrentTabByTag("third");
/*main_tab_addExam.setBackgroundResource(R.drawable.label_1);
main_tab_myExam.setBackgroundResource(R.drawable.label_2);
main_tab_message.setBackgroundResource(R.drawable.label_three_one);*/
main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null);
main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null);
main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_three_one), null, null);
main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);
main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);
main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);
main_layout_message.setBackgroundResource(R.drawable.labelbg);
main_layout_settings.setBackgroundResource(R.drawable.mm_trans);
}
});
main_tab_settings.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
tabHost.setCurrentTabByTag("four");
main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null);
main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null);
main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);
main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_four_one), null, null);
main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);
main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);
main_layout_message.setBackgroundResource(R.drawable.mm_trans);
main_layout_settings.setBackgroundResource(R.drawable.labelbg);
}
});
}
private void initTab(){
tabHost=getTabHost();
tabHost.addTab(tabHost.newTabSpec("first").setIndicator("first").setContent(
new Intent(this, AddExamActivity.class)));
tabHost.addTab(tabHost.newTabSpec("second").setIndicator("second").setContent(
new Intent(this, MyExamActivity.class)));
tabHost.addTab(tabHost.newTabSpec("third").setIndicator("third").setContent(
new Intent(this, MessageActivity.class)));
tabHost.addTab(tabHost.newTabSpec("four").setIndicator("four").setContent(
new Intent(this, SettingActivity.class)));
}
}
复制代码
setCompoundDrawablesWithIntrinsicBounds方法是我用来设置顶部图片的,用来替换android:drawableTop这个属性的背景图,至于为什么那么麻烦每次都要设置背景图片颜色,是因为没用用RadioGroup包含RadioButton,所以RadioButton就不能做到单个切换。
相关文章推荐
- <Android 基础(三十三)> TabHost ~ 仿微信底部菜单
- <Android 基础(三十三)> TabHost ~ 仿微信底部菜单
- Android 仿微信底部菜单
- Android高仿qq及微信底部菜单的几种实现方式
- android 仿微信底部弹出菜单
- android 中使用TabHost控件实现微信界面的底部菜单效果
- Android高仿qq及微信底部菜单的几种实现方式
- Android高仿QQ及微信底部菜单的多种实现方式【附源码地址】
- Android仿微信底部菜单
- Android仿微信底部导航菜单
- Android仿微信底部菜单
- 【附源码地址】Android高仿QQ及微信底部菜单的多种实现方式
- android popupwindow仿微信右上角菜单
- Android滑块底部引导菜单
- Android自定义控件系列(四)—底部菜单(下)
- Android控件使用之FragmentTabHost实现底部菜单
- [置顶] Android:PopWindow — 对Android的底部弹窗、顶部弹窗菜单及自定义界面的使用封装
- android底部菜单实现
- Android仿微信底部菜单栏+顶部菜单栏(附源码)
- Android底部Tab+ViewPager(微信界面)