这是一个简单的Android手机UI设计—“知乎”模仿的界面设计。
任务目标:较为完善的模仿“知乎”的通知界面。
PS:这个我是用Android Studio2.3做的。由于自己初学Android,想模仿一个页面来练手。于是,这个是模仿的“知乎”手机APP外观的界面。
要实现的功能:
(1)“知乎”底部导航栏的实现。
这个是使用Fragment的方式来实现的,主要用到的布局方式有LinearLayout和FrameLayout以及RelativeLayout。
(2)Fragment嵌套Fragment实现多tab页面的效果。
这个是嵌套多个子Fragment的方式来实现的,主要用到的布局方式有LinearLayout。
参照地址:https://my.oschina.net/u/2008084/blog/500678
界面运行效果图
源码:
MainActivity.Java的代码:入口类,即完成底部导航栏的实现。
package com.example.lenovo.design;
import android.graphics.Color;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TextView;
//项目的主Activity,所有的Fragment都嵌入在这里。
public class MainActivity extends FragmentActivity implements View.OnClickListener {
/**
* 用于展示动态的Fragment
*/
private DynamicFragment dynamicFragment;
/**
* 用于展示发现的Fragment
*/
private FindFragment findFragment;
/**
* 用于展示通知的Fragment
*/
private NewsFragment newsFragment;
/**
* 用于展示私信的Fragment
*/
private LetterFragment letterFragment;
/**
* 用于展示更多的Fragment
*/
private MoreFragment moreFragment;
/**
* 界面布局
*/
private View dynamicLayout;
private View findLayout;
private View newsLayout;
private View letterLayout;
private View moreLayout;
/**
* 在Tab布局上显示图标的控件
*/
private ImageView dynamicImage;
private ImageView findImage;
private ImageView newsImage;
private ImageView letterImage;
private ImageView moreImage;
/**
* 在Tab布局上显示标题的控件
*/
private TextView dynamicText;
private TextView findText;
private TextView newsText;
private TextView letterText;
private TextView moreText;
/**
* 用于对Fragment进行管理,定义FragmentManager对象管理器
*/
private android.support.v4.app.FragmentManager fragmentManager;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
// 初始化布局元素
initViews();
fragmentManager = getSupportFragmentManager();
//在FragmentManager里面根据Tag去找相应的fragment. 用户屏幕发生旋转,重新调用onCreate方法。否则会发生重叠
dynamicFragment = (DynamicFragment) fragmentManager.findFragmentByTag("dynamic");
findFragment = (FindFragment) fragmentManager.findFragmentByTag("find");
newsFragment = (NewsFragment) fragmentManager.findFragmentByTag("news");
letterFragment = (LetterFragment) fragmentManager.findFragmentByTag("letter");
moreFragment = (MoreFragment) fragmentManager.findFragmentByTag("more");
// 第一次启动时选中第0个tab
setTabSelection(0);
}
/**
* 在这里获取到每个需要用到的控件的实例,并给它们设置好必要的点击事件。
*/
private void initViews() {
// 初始化底部导航栏的控件
//布局
dynamicLayout = findViewById(R.id.dynamic_layout);
findLayout = findViewById(R.id.find_layout);
newsLayout = findViewById(R.id.news_layout);
letterLayout = findViewById(R.id.letter_layout);
moreLayout = findViewById(R.id.more_layout);
//图片
dynamicImage = (ImageView) findViewById(R.id.dynamic_image);
findImage = (ImageView) findViewById(R.id.find_image);
newsImage = (ImageView) findViewById(R.id.news_image);
letterImage = (ImageView) findViewById(R.id.letter_image);
moreImage = (ImageView) findViewById(R.id.more_image);
//文本
dynamicText = (TextView) findViewById(R.id.dynamic_text);
findText = (TextView) findViewById(R.id.find_text);
newsText = (TextView) findViewById(R.id.news_text);
letterText = (TextView) findViewById(R.id.letter_text);
moreText = (TextView) findViewById(R.id.more_text);
//添加监听事件
dynamicLayout.setOnClickListener(this);
findLayout.setOnClickListener(this);
newsLayout.setOnClickListener(this);
letterLayout.setOnClickListener(this);
moreLayout.setOnClickListener(this);
}
//对不同的Tab点击事件进行判断
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.dynamic_layout:
// 当点击了消息tab时,选中第1个tab
setTabSelection(0);
break;
case R.id.find_layout:
setTabSelection(1);
break;
case R.id.news_layout:
setTabSelection(2);
break;
case R.id.letter_layout:
setTabSelection(3);
break;
case R.id.more_layout:
setTabSelection(4);
break;
default:
break;
}
}
/**
* 根据传入的index参数来设置选中的tab页。
*
* @param index
* 每个tab页对应的下标。0表示动态,1表示发现,2表示通知,3表示私信,4表示更多。
*/
private void setTabSelection(int index) {
// 每次选中之前先清楚掉上次的选中状态
clearSelection();// 清空, 重置选项, 隐藏所有Fragment
// 开启一个Fragment事务
android.support.v4.app.FragmentTransaction transaction = fragmentManager.beginTransaction();
//FragmentTransaction transaction = getFragmentManager().beginTransaction();
// 先隐藏掉所有的Fragment,以防止有多个Fragment显示在界面上的情况
hideFragments(transaction);
switch (index) {
case 0:
// 当点击了消息tab时,改变控件的图片和文字颜色
dynamicImage.setImageResource(R.drawable.zgg2);
//dynamicText.setTextColor(Color.WHITE);
if (dynamicFragment == null) {
// 如果DynamicFragment为空,则创建一个并添加到界面上
dynamicFragment = new DynamicFragment();
transaction.add(R.id.content, dynamicFragment);
} else {
// 如果DynamicFragment不为空,则直接将它显示出来
transaction.show(dynamicFragment);
}
break;
case 1:
findImage.setImageResource(R.drawable.zznz3);
// findText.setTextColor(Color.WHITE);
if (findFragment == null) {
findFragment = new FindFragment();
transaction.add(R.id.content, findFragment);
} else {
transaction.show(findFragment);
}
break;
case 2:
newsImage.setImageResource(R.drawable.zld4);
//newsText.setTextColor(Color.WHITE);
if (newsFragment ==