使用ViewPager实现主界面的布局
来源:互联网 发布:淘宝好吃的泡面排行榜 编辑:程序博客网 时间:2024/05/22 07:42
先看效果图: 左右拖动可切换Viewpager 点击 下方的item也可以进行切换处理
首先建立布局文件,top.xml,bottom.xml,中间是一个Viewpager实现
1: top.xml文件 就是一个textview实现的,
2:bottom.xml文件
<?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="50dip" android:orientation="vertical"> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="50dip"> <LinearLayout android:id="@+id/home_layout_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" android:gravity="center"> <ImageView android:id="@+id/home_image_view" android:layout_width="20dip" android:layout_height="20dip" android:src="@drawable/comui_tab_home_selected" android:background="#00000000" android:layout_gravity="center"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="首页" android:layout_gravity="center" android:layout_marginTop="5dip"/> </LinearLayout> <LinearLayout android:id="@+id/message_layout_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" android:gravity="center"> <ImageView android:id="@+id/message_image_view" android:layout_width="20dip" android:layout_height="20dip" android:src="@drawable/comui_tab_message" android:background="#00000000" android:layout_gravity="center"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="消息" android:layout_gravity="center" android:layout_marginTop="5dip"/> </LinearLayout> <LinearLayout android:id="@+id/person_layout_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" android:gravity="center"> <ImageView android:id="@+id/person_image_view" android:layout_width="20dip" android:layout_height="20dip" android:src="@drawable/comui_tab_person" android:background="#00000000" android:layout_gravity="center"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="我的" android:layout_gravity="center" android:layout_marginTop="5dip"/> </LinearLayout> <LinearLayout android:id="@+id/pond_layout_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" android:gravity="center"> <ImageView android:id="@+id/pond_image_view" android:layout_width="20dip" android:layout_height="20dip" android:src="@drawable/comui_tab_pond" android:background="#00000000" android:layout_gravity="center"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="博客" android:layout_gravity="center" android:layout_marginTop="5dip"/> </LinearLayout> </LinearLayout></LinearLayout>
最后将这里个文件include进 activity_main中
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.yongninggo.application.MainActivity" android:orientation="vertical"> <include layout="@layout/top" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1"> </android.support.v4.view.ViewPager> <include layout="@layout/bottom" /></LinearLayout>
接下来就是mainactivity文件了,先定义xml文件中所有的控件,并获取ID, 初始化4个布局,并写入 给4个image点击事件进行跳转,实现viewpager左右滑动的监听
代码中有注释,我就不一一解释了哈
package com.yongninggo.application;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.LinearLayout;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements View.OnClickListener { private ViewPager viewPager; private PagerAdapter adapter; private List<View> views = new ArrayList<View>(); private LinearLayout home_layout_view; private LinearLayout message_layout_view; private LinearLayout pond_layout_view; private LinearLayout person_layout_view; private ImageView home_image_view; private ImageView message_image_view; private ImageView pond_image_view; private ImageView person_image_view; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); inisview(); initEvents(); } private void inisview() { viewPager = (ViewPager) findViewById(R.id.viewpager); home_layout_view = (LinearLayout) findViewById(R.id.home_layout_view); message_layout_view = (LinearLayout) findViewById(R.id.message_layout_view); pond_layout_view = (LinearLayout) findViewById(R.id.pond_layout_view); person_layout_view = (LinearLayout) findViewById(R.id.person_layout_view); home_image_view = (ImageView) findViewById(R.id.home_image_view); message_image_view = (ImageView) findViewById(R.id.message_image_view); pond_image_view = (ImageView) findViewById(R.id.pond_image_view); person_image_view = (ImageView) findViewById(R.id.person_image_view); //初始化ViewPager的四个布局 LayoutInflater inflater = LayoutInflater.from(this); View home = inflater.inflate(R.layout.home,null); View message = inflater.inflate(R.layout.message,null); View pond = inflater.inflate(R.layout.pond,null); View person = inflater.inflate(R.layout.person,null); views.add(home); views.add(message); views.add(pond); views.add(person); adapter = new PagerAdapter() { @Override //初始化item public Object instantiateItem(ViewGroup container, int position) { View view = views.get(position); container.addView(view); return view; } @Override //摧毁View public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(views.get(position)); } @Override //包含View的个数(4个) public int getCount() { return views.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view ==object ; } }; viewPager.setAdapter(adapter); } private void initEvents() { home_layout_view.setOnClickListener(this); message_layout_view.setOnClickListener(this); pond_layout_view.setOnClickListener(this); person_layout_view.setOnClickListener(this); //监听Page变化的匿名类 viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { int Currentitem = viewPager.getCurrentItem(); Resetimg(); switch (Currentitem){ case 0 : home_image_view.setImageResource(R.drawable.comui_tab_home_selected); break; case 1 : message_image_view.setImageResource(R.drawable.comui_tab_message_selected); break; case 2 : person_image_view.setImageResource(R.drawable.comui_tab_person_selected); break; case 3 : pond_image_view.setImageResource(R.drawable.comui_tab_pond_selected); break; default: break; } } @Override public void onPageScrollStateChanged(int state) { } }); } @Override public void onClick(View v) { Resetimg(); switch (v.getId()){ case R.id.home_layout_view : viewPager.setCurrentItem(0); // 表示点击这个layout切换到第一个界面上 home_image_view.setImageResource(R.drawable.comui_tab_home_selected); break; case R.id.message_layout_view : viewPager.setCurrentItem(1); message_image_view.setImageResource(R.drawable.comui_tab_message_selected); break; case R.id.person_layout_view : viewPager.setCurrentItem(2); person_image_view.setImageResource(R.drawable.comui_tab_person_selected); break; case R.id.pond_layout_view : viewPager.setCurrentItem(3); pond_image_view.setImageResource(R.drawable.comui_tab_pond_selected); break; default: break; } } //将所有的图片切换为暗色的 private void Resetimg() { home_image_view.setImageResource(R.drawable.comui_tab_home); message_image_view.setImageResource(R.drawable.comui_tab_message); pond_image_view.setImageResource(R.drawable.comui_tab_pond); person_image_view.setImageResource(R.drawable.comui_tab_person); }}
阅读全文
0 0
- 使用ViewPager实现主界面的布局
- viewpager+tab 主界面的实现
- 使用ListView实现界面的布局
- ViewPager+Fragment的结合使用,实现QQ界面的理解
- ViewPager+Fragment的结合使用,实现QQ界面的理解
- ViewPager+Fragment的结合使用,实现QQ界面的理解
- ViewPager+Fragment的结合使用,实现QQ界面的理解
- ViewPager+Fragment的结合使用,实现QQ界面的理解
- ViewPager+Fragment的结合使用,实现QQ界面的理解
- 相对布局:使用相对布局实现如下界面的设计
- 表格布局:使用表格布局实现如下界面的设计
- 使用ViewPager实现几个界面的切换,类似QQ
- android viewPager使用,实现界面的左右滑动
- 使用viewpager adapter实现微信的滑动界面
- 使用viewpager实现QQ界面切换效果
- 使用Viewpager实现程序引导界面
- 使用ViewPager实现顶部tabbar切换界面
- ScrollView + viewpager实现android的app主界面效果
- kmeans实现文本聚类
- 两年iOS开发之路
- python 生成拼接xml报文
- 集合类-Map
- muduo下载地址
- 使用ViewPager实现主界面的布局
- windows下redis的安装记录
- Hierarchical Attention Network for Document Classification阅读笔记
- 异步FIFO中读写指针为什么要用格雷码
- FAFU OJ 0-1背包问题
- 桥接模式
- 解析BeanDefinition。
- ailab-mltk 机器学习整合包 [广告]
- 字符串游戏