Android仿百度壁纸客户端之搭建主框架（一）

这是个不错的教程，自己学完了之后就拿出来分享了，本来想一个帖子写完，但是发现这样对自己写博客的效率有点出入，为了让大家看的舒服点，所以分开来写，我们先开看下百度壁纸的客户端是什么样子的

我们先来写个主页的框架，我们新建一个项目——baiduwallpaper 

写个item
layout_tab_item

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <relativelayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_centerinparent="true">

 <imageview
 android:id="@+id/tabimg"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerhorizontal="true" />

 <textview
 android:id="@+id/tabtext"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/tabimg"
 android:layout_centerhorizontal="true"
 android:text="@string/app_name"
 android:textcolor="@android:color/white"
 android:textsize="16sp" />


 </relativelayout>

</relativelayout>

然后我们再写个布局 

<?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="70dp"
 android:orientation="horizontal">

 <include
 android:id="@+id/homelayout"
 layout="@layout/layout_tab_item"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1" />

 <include
 android:id="@+id/selectlayout"
 layout="@layout/layout_tab_item"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1" />

 <include
 android:id="@+id/searchlayout"
 layout="@layout/layout_tab_item"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1" />

 <include
 android:id="@+id/locationlayout"
 layout="@layout/layout_tab_item"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1" />

 <include
 android:id="@+id/settinglayout"
 layout="@layout/layout_tab_item"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1" />


</linearlayout>

这样我们就可以自定义组合控件了
 mybottomlayout

package com.lgl.baiduwallpaper.view;

import android.content.context;
import android.graphics.color;
import android.util.attributeset;
import android.view.layoutinflater;
import android.view.view;
import android.widget.linearlayout;
import android.widget.relativelayout;
import android.widget.textview;

import com.lgl.baiduwallpaper.r;

/**
 * 底部布局
 * created by lgl on 16/3/31.
 */
public class mybottomlayout extends linearlayout {

 //跟布局是relativelayout
 private relativelayout homelayout, selectlayout, searchlayout, locationlayout, settinglayout;
 //布局加载
 private layoutinflater inflater;

 //构造方法
 public mybottomlayout(context context, attributeset attrs) {
 super(context, attrs);

 initview();
 }

 /**
 * 初始化
 */
 private void initview() {
 inflater = layoutinflater.from(getcontext());
 view view = inflater.inflate(r.layout.layout_bottom, this);
 findview(view);
 initdata();
 setonclick();
 }

 /**
 * 初始化数据
 */
 private void initdata() {
 homelayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_home_down);
 textview tvhome = (textview) homelayout.findviewbyid(r.id.tabtext);
 tvhome.settext("首页");
 tvhome.settextcolor(color.blue);

 selectlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_search);
 textview tvselect = (textview) selectlayout.findviewbyid(r.id.tabtext);
 tvselect.settext("精选");
 tvselect.settextcolor(color.white);

 searchlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_find);
 textview tvsearch = (textview) searchlayout.findviewbyid(r.id.tabtext);
 tvsearch.settext("搜索");
 tvsearch.settextcolor(color.white);

 locationlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_manage);
 textview tvloaction = (textview) locationlayout.findviewbyid(r.id.tabtext);
 tvloaction.settext("本地");
 tvloaction.settextcolor(color.white);

 settinglayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_more);
 textview tvsetting = (textview) settinglayout.findviewbyid(r.id.tabtext);
 tvsetting.settext("设置");
 tvsetting.settextcolor(color.white);
 }

 /**
 * 找到控件的方法
 *
 * @param view
 */
 private void findview(view view) {
 homelayout = (relativelayout) view.findviewbyid(r.id.homelayout);
 selectlayout = (relativelayout) view.findviewbyid(r.id.selectlayout);
 searchlayout = (relativelayout) view.findviewbyid(r.id.searchlayout);
 locationlayout = (relativelayout) view.findviewbyid(r.id.locationlayout);
 settinglayout = (relativelayout) view.findviewbyid(r.id.settinglayout);
 }

 /**
 * 控件的点击事件
 */
 private void setonclick() {
 homelayout.setonclicklistener(new lister());
 selectlayout.setonclicklistener(new lister());
 searchlayout.setonclicklistener(new lister());
 locationlayout.setonclicklistener(new lister());
 settinglayout.setonclicklistener(new lister());
 }

 /**
 * 点击接口
 */
 private class lister implements onclicklistener {

 /**
 * 点击后改变点击状态
 * 切换页面
 *
 * @param v
 */
 @override
 public void onclick(view v) {
 switch (v.getid()) {
 case r.id.homelayout:
  initpix(0);
  break;
 case r.id.selectlayout:
  initpix(1);
  break;
 case r.id.searchlayout:
  initpix(2);
  break;
 case r.id.locationlayout:
  initpix(3);
  break;
 case r.id.settinglayout:
  initpix(4);
  break;
 }
 icallbacklistener.clic(v.getid());
 }
 }

 /**
 * 切换卡的位置
 */
 public void initpix(int i) {
 switch (i) {
 case 0:
 homelayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_home_down);
 textview tvhome0 = (textview) homelayout.findviewbyid(r.id.tabtext);
 tvhome0.settextcolor(color.blue);

 selectlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_search);
 textview tvselect0 = (textview) selectlayout.findviewbyid(r.id.tabtext);
 tvselect0.settextcolor(color.white);

 searchlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_find);
 textview tvsearch0 = (textview) searchlayout.findviewbyid(r.id.tabtext);
 tvsearch0.settextcolor(color.white);

 locationlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_manage);
 textview tvlocation0 = (textview) locationlayout.findviewbyid(r.id.tabtext);
 tvlocation0.settextcolor(color.white);

 settinglayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_more);
 textview tvsetting0 = (textview) settinglayout.findviewbyid(r.id.tabtext);
 tvsetting0.settextcolor(color.white);

 break;
 case 1:

 homelayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_home);
 textview tvhome1 = (textview) homelayout.findviewbyid(r.id.tabtext);
 tvhome1.settextcolor(color.white);

 selectlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_search_down);
 textview tvselect1 = (textview) selectlayout.findviewbyid(r.id.tabtext);
 tvselect1.settextcolor(color.blue);

 searchlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_find);
 textview tvsearch1 = (textview) searchlayout.findviewbyid(r.id.tabtext);
 tvsearch1.settextcolor(color.white);

 locationlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_manage);
 textview tvlocation1 = (textview) locationlayout.findviewbyid(r.id.tabtext);
 tvlocation1.settextcolor(color.white);

 settinglayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_more);
 textview tvsetting1 = (textview) settinglayout.findviewbyid(r.id.tabtext);
 tvsetting1.settextcolor(color.white);

 break;
 case 2:

 homelayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_home);
 textview tvhome2 = (textview) homelayout.findviewbyid(r.id.tabtext);
 tvhome2.settextcolor(color.white);

 selectlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_search);
 textview tvselect2 = (textview) selectlayout.findviewbyid(r.id.tabtext);
 tvselect2.settextcolor(color.white);

 searchlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_find_down);
 textview tvsearch2 = (textview) searchlayout.findviewbyid(r.id.tabtext);
 tvsearch2.settextcolor(color.blue);

 locationlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_manage);
 textview tvlocation2 = (textview) locationlayout.findviewbyid(r.id.tabtext);
 tvlocation2.settextcolor(color.white);

 settinglayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_more);
 textview tvsetting2 = (textview) settinglayout.findviewbyid(r.id.tabtext);
 tvsetting2.settextcolor(color.white);


 break;
 case 3:

 homelayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_home);
 textview tvhome3 = (textview) homelayout.findviewbyid(r.id.tabtext);
 tvhome3.settextcolor(color.white);

 selectlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_search);
 textview tvselect3 = (textview) selectlayout.findviewbyid(r.id.tabtext);
 tvselect3.settextcolor(color.white);

 searchlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_find);
 textview tvsearch3 = (textview) searchlayout.findviewbyid(r.id.tabtext);
 tvsearch3.settextcolor(color.white);

 locationlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_manage_down);
 textview tvlocation3 = (textview) locationlayout.findviewbyid(r.id.tabtext);
 tvlocation3.settextcolor(color.blue);

 settinglayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_more);
 textview tvsetting3 = (textview) settinglayout.findviewbyid(r.id.tabtext);
 tvsetting3.settextcolor(color.white);

 break;
 case 4:

 homelayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_home);
 textview tvhome4 = (textview) homelayout.findviewbyid(r.id.tabtext);
 tvhome4.settextcolor(color.white);

 selectlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_search);
 textview tvselect4 = (textview) selectlayout.findviewbyid(r.id.tabtext);
 tvselect4.settextcolor(color.white);

 searchlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_find);
 textview tvsearch4 = (textview) searchlayout.findviewbyid(r.id.tabtext);
 tvsearch4.settextcolor(color.white);

 locationlayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_manage);
 textview tvlocation4 = (textview) locationlayout.findviewbyid(r.id.tabtext);
 tvlocation4.settextcolor(color.white);

 settinglayout.findviewbyid(r.id.tabimg).setbackgroundresource(r.mipmap.image_tabbar_button_more_down);
 textview tvsetting4 = (textview) settinglayout.findviewbyid(r.id.tabtext);
 tvsetting4.settextcolor(color.blue);

 break;
 }
 }
}

我们运行一下

接下来我们让他可以切换选项卡，我们定义一个接口

 /**
 * 切换页面的接口
 */
 public interface icallbacklistener {
 public void clic(int id);
 }

 icallbacklistener icallbacklistener = null;

 public void setoncallbacklistener(icallbacklistener icallbacklistener) {
 this.icallbacklistener = icallbacklistener;
 }

接着初始化数据

 /**
 * 设置默认的第一页数据
 */
 private void initpagercontent(android.app.fragment fragment) {
 fragmentmanager manager = getfragmentmanager();
 android.app.fragmenttransaction ft = manager.begintransaction();
 ft.replace(r.id.mycontent,fragment);
 ft.commit();
 }

然后我们引用的时候就可以直接new了

 /**
 * 切换接口
 */
 private class mycallbacklistener implements mybottomlayout.icallbacklistener {

 @override
 public void clic(int id) {
 switch (id) {
 case r.id.homelayout:
  initpagercontent(new homefragment());

  break;
 case r.id.selectlayout:
  initpagercontent(new selectfragment());

  break;
 case r.id.searchlayout:
  initpagercontent(new searchfragment());

  break;
 case r.id.locationlayout:
  initpagercontent(new loactionfragment());

  break;
 case r.id.settinglayout:
  initpagercontent(new settingfragment());

  break;

 }
 }
 }

 我们在运行一下 

但是有一点我们要知道，我们还要实现滑动，这样的话，我们就要使用viewpager了
 layout_main.xml

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">


 <android.support.v4.view.viewpager
 android:id="@+id/myviewpager"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_above="@+id/mybottomlayout" />

 <com.lgl.baiduwallpaper.view.mybottomlayout
 android:id="@+id/mybottomlayout"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignparentbottom="true"
 android:background="@mipmap/image_titlebar_background" />
</relativelayout>

具体的，我就直接把mainactivity的代码贴上吧

 package com.lgl.baiduwallpaper;

import android.os.bundle;
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentactivity;
import android.support.v4.app.fragmentmanager;
import android.support.v4.app.fragmentpageradapter;
import android.support.v4.view.viewpager;

import com.lgl.baiduwallpaper.fragment.homefragment;
import com.lgl.baiduwallpaper.fragment.loactionfragment;
import com.lgl.baiduwallpaper.fragment.searchfragment;
import com.lgl.baiduwallpaper.fragment.selectfragment;
import com.lgl.baiduwallpaper.fragment.settingfragment;
import com.lgl.baiduwallpaper.view.mybottomlayout;

/**
 * 主界面
 */
public class mainactivity extends fragmentactivity {

 private mybottomlayout mybottomlayout;
 private viewpager viewpager;

 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 setcontentview(r.layout.activity_main);

 initview();
 }

 /**
 * 初始化
 */
 private void initview() {
// initpagercontent(new homefragment());
 findview();
 setonclick();
 }

// /**
// * 设置默认的第一页数据
// */
// private void initpagercontent(android.app.fragment fragment) {
// fragmentmanager manager = getfragmentmanager();
// android.app.fragmenttransaction ft = manager.begintransaction();
// ft.replace(r.id.mycontent,fragment);
// ft.commit();
// }

 /**
 * 点击事件
 */
 private void setonclick() {
 mybottomlayout.setoncallbacklistener(new mycallbacklistener());
 }

 /**
 * 找寻控件
 */
 private void findview() {
 mybottomlayout = (mybottomlayout) findviewbyid(r.id.mybottomlayout);

 viewpager = (viewpager) findviewbyid(r.id.myviewpager);
 viewpager.setadapter(new myfragmentadapter(getsupportfragmentmanager()));
 //页面监听
 viewpager.setonpagechangelistener(new viewpager.onpagechangelistener() {
 @override
 public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {

 }

 @override
 public void onpageselected(int position) {
 mybottomlayout.initpix(position);
 }

 @override
 public void onpagescrollstatechanged(int state) {

 }
 });
 }

 /**
 * 切换接口
 */
 private class mycallbacklistener implements mybottomlayout.icallbacklistener {

 @override
 public void clic(int id) {
 switch (id) {
 case r.id.homelayout:
//  initpagercontent(new homefragment());
  viewpager.setcurrentitem(0);
  break;
 case r.id.selectlayout:
//  initpagercontent(new selectfragment());
  viewpager.setcurrentitem(1);
  break;
 case r.id.searchlayout:
//  initpagercontent(new searchfragment());
  viewpager.setcurrentitem(2);
  break;
 case r.id.locationlayout:
//  initpagercontent(new loactionfragment());
  viewpager.setcurrentitem(3);
  break;
 case r.id.settinglayout:
//  initpagercontent(new settingfragment());
  viewpager.setcurrentitem(4);
  break;

 }
 }
 }

 /**
 * viewpager的adapter
 */
 private class myfragmentadapter extends fragmentpageradapter {

 public myfragmentadapter(fragmentmanager fm) {
 super(fm);
 }

 @override
 public fragment getitem(int position) {
 switch (position) {
 case 0:
  return new homefragment();
 case 1:
  return new selectfragment();
 case 2:
  return new searchfragment();
 case 3:
  return new loactionfragment();
 case 4:
  return new settingfragment();
 }
 return null;
 }

 @override
 public int getcount() {
 //5个页面
 return 5;
 }
 }
}

主要是你切换的时候setcurrentitem(id);同时监听viewpager的滑动，就可以*切换了，我们运行一下

源码下载： android仿百度壁纸客户端

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。