学习内容来自“慕课网”

这里用Fragment来实现APP主界面

思路:

底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字

1、默认显示第一个功能(微信)的图标为亮,其他三个为暗

2、点击相应的按钮,首先将所有的图标变暗,接着隐藏所有Fragment,再把点击的对应的Fragment显示出来,并把相应的图标显示亮

首先布局文件

activity_main.xml与ViewPager实现Tab的是不一样的

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include layout="@layout/top"/> <FrameLayout //与Viewpager实现Tab的不同点在这里
android:id="@+id/id_content"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
></FrameLayout> <include layout="@layout/bottom"/>
</LinearLayout>

activity_main

 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:background="@drawable/title_bar"
5 android:layout_height="45dp"
6 android:gravity="center"
7 android:orientation="vertical" >
8 <TextView
9 android:layout_height="wrap_content"
10 android:layout_width="wrap_content"
11 android:layout_gravity="center"
12 android:text="微信"
13 android:textColor="#ffffff"
14 android:textSize="20sp"
15 android:textStyle="bold"
16
17 />
18
19 </LinearLayout>
复制代码

top

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="@drawable/bottom_bar"
android:orientation="horizontal" > <LinearLayout
android:id="@+id/id_tab_weixin"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/id_tab_weixin_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab_weixin_pressed"
android:clickable="false"
android:background="#00000000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#ffffff"
/>
</LinearLayout> <LinearLayout
android:id="@+id/id_tab_add"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/id_tab_add_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="@drawable/tab_address_normal"
android:background="#00000000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通信录"
android:textColor="#ffffff"
/>
</LinearLayout> <LinearLayout
android:id="@+id/id_tab_frd"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/id_tab_frd_image"
android:layout_width="wrap_content"
android:clickable="false"
android:layout_height="wrap_content"
android:src="@drawable/tab_find_frd_normal"
android:background="#00000000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="朋友"
android:textColor="#ffffff"
/>
</LinearLayout> <LinearLayout
android:id="@+id/id_tab_set"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/id_tab_set_image"
android:layout_width="wrap_content"
android:clickable="false"
android:layout_height="wrap_content"
android:src="@drawable/tab_settings_normal"
android:background="#00000000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="设置"
android:textColor="#ffffff"
/>
</LinearLayout>
</LinearLayout> bottom.xml

bottom

 package com.example.fragment_tab;

 import android.os.Bundle;
import android.app.Activity;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.text.method.HideReturnsTransformationMethod;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout; public class MainActivity extends FragmentActivity implements OnClickListener{ private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAdd;
private LinearLayout mTabSet; //imagebutton
private ImageButton mImgWeixin;
private ImageButton mImgFrd;
private ImageButton mImgAdd;
private ImageButton mImgSet; //fragment
private Fragment mTab_1;
private Fragment mTab_2;
private Fragment mTab_3;
private Fragment mTab_4; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main); //初始化
init();
initEvent();
//默认显示第一个功能的界面(微信界面)
setSelect(0);
} private void initEvent() {
// TODO Auto-generated method stub
mTabWeixin.setOnClickListener(this);
mTabAdd.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabSet.setOnClickListener(this); } private void init() {
// TODO Auto-generated method stub
mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTabAdd = (LinearLayout) findViewById(R.id.id_tab_add);
mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
mTabSet = (LinearLayout) findViewById(R.id.id_tab_set); mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_image);
mImgAdd = (ImageButton) findViewById(R.id.id_tab_add_image);
mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_image);
mImgSet = (ImageButton) findViewById(R.id.id_tab_set_image); } //响应事件
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
//先切换图片至暗色
resetImage();
switch (v.getId()) {
case R.id.id_tab_weixin:
setSelect(0);
break;
case R.id.id_tab_add:
setSelect(1);
break;
case R.id.id_tab_frd:
setSelect(2);
break;
case R.id.id_tab_set:
setSelect(3);
break; default:
break;
}
} private void setSelect(int i){
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
//隐藏所有
hidFragment(transaction); //把图片设置为亮的 //设置内容区域
switch (i) {
case 0:
if(mTab_1 == null)
{
mTab_1 = new WeixinFragment();
transaction.add(R.id.id_content, mTab_1);
}
else
{
transaction.show(mTab_1); }
mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
if(mTab_2 == null)
{
mTab_2 = new AddFragment();
transaction.add(R.id.id_content, mTab_2);
}
else
{
transaction.show(mTab_2); }
mImgAdd.setImageResource(R.drawable.tab_address_pressed);
break;
case 2:
if(mTab_3 == null)
{
mTab_3 = new FrdFragment();
transaction.add(R.id.id_content, mTab_3);
}
else
{
transaction.show(mTab_3); }
mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 3:
if(mTab_4 == null)
{
mTab_4 = new SetFragment();
transaction.add(R.id.id_content, mTab_4);
}
else
{
transaction.show(mTab_4); }
mImgSet.setImageResource(R.drawable.tab_settings_pressed);
break; default:
break; }
transaction.commit();
}
private void hidFragment(FragmentTransaction transaction) {
// TODO Auto-generated method stub
if(mTab_1 != null)
{
transaction.hide(mTab_1);
}
if(mTab_2 != null)
{
transaction.hide(mTab_2);
}
if(mTab_3 != null)
{
transaction.hide(mTab_3);
}
if(mTab_4 != null)
{
transaction.hide(mTab_4);
} } //将所有功能图标的界面设为暗色
private void resetImage() {
// TODO Auto-generated method stub
mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
mImgAdd.setImageResource(R.drawable.tab_address_normal);
mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
mImgSet.setImageResource(R.drawable.tab_settings_normal); } } MainActivity

mainactivity

 package fragments;

 import com.example.licai.R;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; public class Zhichu_fragment extends Fragment { @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View v=inflater.inflate(R.layout.zhichu_fragment, null);
return v;
} }

fragment

仿微信客户端 帧布局中加入fragment的更多相关文章

  1. electron聊天室|vue+electron-vue仿微信客户端|electron桌面聊天

    一.项目概况 基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例,实现消息 ...

  2. [Android] Android 手机下 仿 微信 客户端 界面 -- 微聊

    Android 手机下 仿 微信 客户端 界面 -- 微聊 (包括聊天列表 + 聊天对话页 + 朋友圈列表页 + 我的/发现 列表页) 项目演示: 功能说明: 1)底部标签切换 (TabHost + ...

  3. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  4. 在布局中使用android.support.v4.app.Fragment的注意事项

    1.Activity必须继承android.support.v4.app.FragmentActivity 2.fragment标签的name属性必须是完全限定包名,如下: <LinearLay ...

  5. Android中帧布局-FrameLayout和网格布局-GridLayout

    帧布局-FrameLayout 一.概念 帧布局中,容器为每个加入其中的空间创建一个空白的区域(成为一帧).每个空间占据一帧,这些帧会按gravity属性自动对齐. 帧布局的效果是将其中的所有空间叠加 ...

  6. android布局 FrameLayout(帧布局)详解

    看到一篇很有趣的文章对我就是冲着萌妹子看的 FrameLayout(帧布局) 前言 作为android六大布局中最为简单的布局之一,该布局直接在屏幕上开辟出了一块空白区域, 当我们往里面添加组件的时候 ...

  7. Android中Fragment和ViewPager那点事儿(仿微信APP)

    在之前的博文<Android中使用ViewPager实现屏幕页面切换和引导页效果实现>和<Android中Fragment的两种创建方式>以及<Android中Fragm ...

  8. Android中使用ExpandableListView实现微信通讯录界面(完善仿微信APP)

    之前的博文<Android中使用ExpandableListView实现好友分组>我简单介绍了使用ExpandableListView实现简单的好友分组功能,今天我们针对之前的所做的仿微信 ...

  9. 安卓开发笔记——Fragment+ViewPager组件(高仿微信界面)

    什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开发复习笔记——ViewPager组件(仿微信引导界面)>,不清楚的朋友可以看看,这里就不再 ...

随机推荐

  1. 不重启修改'log_slave_updates'变量

    Variable 'log_slave_updates' is a read only variable 不重启修改mysql变量 执行复制的时候遇到的问题 mysql> show variab ...

  2. CRM牛人博客

    http://www.cnblogs.com/caims/  刀客 http://www.cnblogs.com/waxdoll/ 蜡人张

  3. 普适注意力:用于机器翻译的2D卷积神经网络,显著优于编码器-解码器架构

    现有的当前最佳机器翻译系统都是基于编码器-解码器架构的,二者都有注意力机制,但现有的注意力机制建模能力有限.本文提出了一种替代方法,这种方法依赖于跨越两个序列的单个 2D 卷积神经网络.该网络的每一层 ...

  4. Java 中的 JVM、堆和栈 -- 初步了解

    JVM -- Java Virtual Machine(Java虚拟机) —— 因为要说堆和栈,所以我们必须要先简单的说一下JVM.(JVM详细请找度娘啦~) 首先,我们都知道 java 一直宣传的口 ...

  5. Linux 各类设置、配置、使用技巧参考,Linux使用集锦

    ========== 参考格式 (新增记录时,复制粘贴在下)============= [日期]: <标题> 参考链接ref1: 参考链接ref2: 正文: ========== 参考格式 ...

  6. HAproxy目录分发

    ServerA服务的数据查询接口:/api/v1/datas HAproxy地址10.66.222.333将ServerA添加转发规则添加到HAproxyhaproxy.cfg frontend ht ...

  7. OpenACC 梯度下降法求解线性方程的优化

    ▶ 书上第二章,用一系列步骤优化梯度下降法解线性方程组.才发现 PGI community 编译器不支持 Windows 下的 C++ 编译(有 pgCC 命令但是不支持 .cpp 文件,要专业版才支 ...

  8. 理解无偏估计(unbiased estimation)

    判断一个估计量“好坏”,至少可以从以下三个方面来考虑: 无偏估计 有效性 一致性 参考内容: 如何理解无偏估计量?https://www.matongxue.com/madocs/808.html 衡 ...

  9. FireDACQuery FDQuery New

    FDQuery FDQuery1->ChangeCount;也有UpdatesPending属性 FDQuery1->ApplyUpdates() ExecSQL('select * fr ...

  10. 进程池(Pool)

    进程池用于进程维护, 当使用时,将会去进程池取数据 from multiprocessing import Pool, Processimport os, time def f(i): time.sl ...