使用Viewpager 和 Fragment实现顶部导航

最新推荐文章于 2024-06-03 08:19:31 发布
最新推荐文章于 2024-06-03 08:19:31 发布
阅读量697 收藏
点赞数
分类专栏： android笔记 文章标签： 导航 fragment viewpager
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010585448/article/details/48879193
版权

先看下效果


不是特别清楚，凑活一下吧。上代码。

先来看一下都需要那些文件：


右边是布局文件，左边是java文件

一 布局文件。

activity_main.xml

<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/slide_tab_top"/>   
    
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
         >

        <ImageView
            android:id="@+id/cursor"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@drawable/main_underline" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:background="#ffffff"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />

</LinearLayout>

slide_tab_top.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  	android:id="@+id/slide_tab"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/text1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:text="沐浴"
            android:textColor="@color/text_color"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/text2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:text="按摩"
            android:textColor="@color/text_color"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/text3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:text="足疗"
            android:textColor="@color/text_color"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/text4"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:text="SPA"
            android:textColor="@color/text_color"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/text5"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:text="娱乐"
            android:textColor="@color/text_color"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/text6"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:text="度假"
            android:textColor="@color/text_color"
            android:textSize="16sp" />
    </LinearLayout>

</LinearLayout>

fragment1.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="match_parent"
    android:orientation="vertical" 
    android:gravity="center">
    
    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first_fragment"/>

</LinearLayout>

fragment2.xml-fragment6.xml差不多，就不贴出了


二、java文件

MainActivity.java

package com.lql.tabbtndemo;

import java.util.ArrayList;
import java.util.List;

import com.lql.tabbtndemo.util.ScreenUtils;

import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements OnClickListener{

	private static String TAG = "MainActivity";
	
	private ViewPager viewPager;

	/**
	 * 指示器图片
	 */
	private ImageView indicatorImg;

	/**
	 * 顶部的几个tab导航卡
	 */
	private TextView tab1, tab2, tab3, tab4, tab5, tab6;

	private int offset = 0;// 动画图片偏移量
	private int currentIndex = 0;// 当前页卡编号
	private int indicatorImgWidth;// 动画图片宽度
	/**
	 * Fragment的集合
	 */
	private List<Fragment> mFragments = new ArrayList<Fragment>();
	/**
	 * Fragment的数据适配器
	 */
	private MyFragmentAdapter mAdapter;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		init();
	}
	
	
	private void init() {
		// TODO Auto-generated method stub
		initIndicator();
		initTabTextView();
		initViewPager();
	}


	/**
	 * 对游标指示器初始化
	 */
	private void initIndicator() {
		// TODO Auto-generated method stub
		
		indicatorImg = (ImageView)findViewById(R.id.cursor);
		/**
		 * 根据每个屏幕宽度，计算游标的长
		 */
		int indicatorWidth = ScreenUtils.getScreenWidth(this) / 6;
		LayoutParams params = indicatorImg.getLayoutParams();
		params.width = indicatorWidth;
		indicatorImg.setLayoutParams(params);
		
		//图片宽度
		indicatorImgWidth = BitmapFactory.decodeResource(getResources(), R.drawable.main_underline).getWidth();
		//偏移量
		offset = indicatorWidth;
		Matrix matrix = new Matrix();
		matrix.postTranslate(offset, 0);
		indicatorImg.setImageMatrix(matrix);// 设置动画初始位置
		
	}


	/**
	 * 初始导航卡
	 */
	private void initTabTextView() {
		// TODO Auto-generated method stub
		tab1 = (TextView)findViewById(R.id.text1);
		tab2 = (TextView)findViewById(R.id.text2);
		tab3 = (TextView)findViewById(R.id.text3);
		tab4 = (TextView)findViewById(R.id.text4);
		tab5 = (TextView)findViewById(R.id.text5);
		tab6 = (TextView)findViewById(R.id.text6);
		
		tab1.setOnClickListener(new MyTabOnClickListener(0));
		tab2.setOnClickListener(new MyTabOnClickListener(1));
		tab3.setOnClickListener(new MyTabOnClickListener(2));
		tab4.setOnClickListener(new MyTabOnClickListener(3));
		tab5.setOnClickListener(new MyTabOnClickListener(4));
		tab6.setOnClickListener(new MyTabOnClickListener(5));
	}

	/**
	 * 点击导航选项卡时，就选中相应的Fragment
	 * @author Administrator
	 *
	 */
	private class MyTabOnClickListener implements OnClickListener{

		int index  = 0;
		public MyTabOnClickListener(int index){
			this.index = index;
		}
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			viewPager.setCurrentItem(index);
		}
		
	}

	@SuppressWarnings("deprecation")
	private void initViewPager() {
		// TODO Auto-generated method stub
		viewPager = (ViewPager)findViewById(R.id.viewpager);
		Fragment1 fragment1 = new Fragment1();
		Fragment2 fragment2 = new Fragment2();
		Fragment3 fragment3 = new Fragment3();
		Fragment4 fragment4 = new Fragment4();
		Fragment5 fragment5 = new Fragment5();
		Fragment6 fragment6 = new Fragment6();
		
		mFragments.add(fragment1);
		mFragments.add(fragment2);
		mFragments.add(fragment3);
		mFragments.add(fragment4);
		mFragments.add(fragment5);
		mFragments.add(fragment6);
		
		mAdapter = new MyFragmentAdapter(getSupportFragmentManager(), mFragments);
		viewPager.setAdapter(mAdapter);
		viewPager.setCurrentItem(0);
		tab1.setTextColor(Color.BLUE);
		viewPager.setOffscreenPageLimit(5);// 设置缓存页面，6个页面缓存5个，这样每次就不用调用onCreateView方法
		viewPager.setOnPageChangeListener(new MyPageChangeListener());//设置Page页改变时的监听事件
	}
	
	private class MyPageChangeListener implements OnPageChangeListener{

		@Override
		public void onPageScrollStateChanged(int arg0) {
			// TODO Auto-generated method stub
			
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			// TODO Auto-generated method stub
			
		}

		@Override
		public void onPageSelected(int index) {
			// TODO Auto-generated method stub
			
			int one = offset;
			Log.d(TAG,"one:" + one+ "------------>offset:"+offset);
			resetTabTextView();
			switch (index) {
			case 0:
				tab1.setTextColor(Color.BLUE);
				break;
			case 1:
				tab2.setTextColor(Color.BLUE);
				break;
			case 2:
				tab3.setTextColor(Color.BLUE);
				break;
			case 3:
				tab4.setTextColor(Color.BLUE);
				break;
			case 4:
				tab5.setTextColor(Color.BLUE);
				break;
			case 5:
				tab6.setTextColor(Color.BLUE);
				break;
			default:
				break;
			}
			/**
			 * 定义选项卡指示器的动画，做水平滑动 ， X坐标从one * currentIndex 变换到 one * index
			 */
			Animation animation =new TranslateAnimation(one * currentIndex, one * index, 0, 0);
			currentIndex = index;//改变当前索引值
			animation.setFillAfter(true);//设置为True后，图片停在动画结束的位置
			animation.setDuration(300);//动画持续时长 300毫秒
			indicatorImg.startAnimation(animation);//启动动画
		}

		
	}
	
	private void resetTabTextView() {
		// TODO Auto-generated method stub
		tab1.setTextColor(Color.BLACK);
		tab2.setTextColor(Color.BLACK);
		tab3.setTextColor(Color.BLACK);
		tab4.setTextColor(Color.BLACK);
		tab5.setTextColor(Color.BLACK);
		tab6.setTextColor(Color.BLACK);
	}


	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		
	}

}


<pre name="code" class="java">MyFragmentAdapter.java

 

 

 

package com.lql.tabbtndemo;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;


/**
 * Fragmnet的适配器
 * @author Administrator
 *
 */
public class MyFragmentAdapter extends FragmentPagerAdapter {

	private List<Fragment> mFragments;
	
	public MyFragmentAdapter(FragmentManager fm , List<Fragment> fragments) {
		super(fm);
		this.mFragments = fragments;
		// TODO Auto-generated constructor stub
	}

	@Override
	public Fragment getItem(int arg0) {
		// TODO Auto-generated method stub
		return mFragments.get(arg0);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return mFragments.size();
	}

}

 

 

 

 

Fragment1.java
 

 

package com.lql.tabbtndemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment1 extends Fragment {

	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		return inflater.inflate(R.layout.fragment1, container, false);
	}
	
}

 

 Fragment2-Fragment6.java与Fragment1.java类似 

 


 
 

还有一个获取屏幕宽度的工具类ScreenUtil.java
 

 

package com.lql.tabbtndemo.util;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Rect;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;

/**
 * 鑾峰緱灞忓箷鐩稿叧鐨勮緟鍔╃�?
 * 
 * @author zhy
 * 
 */
public class ScreenUtils
{
	private ScreenUtils()
	{
		/* cannot be instantiated */
		throw new UnsupportedOperationException("cannot be instantiated");
	}

	/**
	 * 鑾峰緱灞忓箷楂樺�?
	 * 
	 * @param context
	 * @return
	 */
	public static int getScreenWidth(Context context)
	{
		WindowManager wm = (WindowManager) context
				.getSystemService(Context.WINDOW_SERVICE);
		DisplayMetrics outMetrics = new DisplayMetrics();
		wm.getDefaultDisplay().getMetrics(outMetrics);
		return outMetrics.widthPixels;
	}

	/**
	 * 鑾峰緱灞忓箷瀹藉�?
	 * 
	 * @param context
	 * @return
	 */
	public static int getScreenHeight(Context context)
	{
		WindowManager wm = (WindowManager) context
				.getSystemService(Context.WINDOW_SERVICE);
		DisplayMetrics outMetrics = new DisplayMetrics();
		wm.getDefaultDisplay().getMetrics(outMetrics);
		return outMetrics.heightPixels;
	}

	/**
	 * 鑾峰緱鐘舵�佹爮鐨勯珮搴�?
	 * 
	 * @param context
	 * @return
	 */
	public static int getStatusHeight(Context context)
	{

		int statusHeight = -1;
		try
		{
			Class<?> clazz = Class.forName("com.android.internal.R$dimen");
			Object object = clazz.newInstance();
			int height = Integer.parseInt(clazz.getField("status_bar_height")
					.get(object).toString());
			statusHeight = context.getResources().getDimensionPixelSize(height);
		} catch (Exception e)
		{
			e.printStackTrace();
		}
		return statusHeight;
	}

	/**
	 * 鑾峰彇褰撳墠灞忓箷鎴浘锛屽寘鍚姸鎬佹�?
	 * 
	 * @param activity
	 * @return
	 */
	public static Bitmap snapShotWithStatusBar(Activity activity)
	{
		View view = activity.getWindow().getDecorView();
		view.setDrawingCacheEnabled(true);
		view.buildDrawingCache();
		Bitmap bmp = view.getDrawingCache();
		int width = getScreenWidth(activity);
		int height = getScreenHeight(activity);
		Bitmap bp = null;
		bp = Bitmap.createBitmap(bmp, 0, 0, width, height);
		view.destroyDrawingCache();
		return bp;

	}

	/**
	 * 鑾峰彇褰撳墠灞忓箷鎴浘锛屼笉鍖呭惈鐘舵�佹�?
	 * 
	 * @param activity
	 * @return
	 */
	public static Bitmap snapShotWithoutStatusBar(Activity activity)
	{
		View view = activity.getWindow().getDecorView();
		view.setDrawingCacheEnabled(true);
		view.buildDrawingCache();
		Bitmap bmp = view.getDrawingCache();
		Rect frame = new Rect();
		activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
		int statusBarHeight = frame.top;

		int width = getScreenWidth(activity);
		int height = getScreenHeight(activity);
		Bitmap bp = null;
		bp = Bitmap.createBitmap(bmp, 0, statusBarHeight, width, height
				- statusBarHeight);
		view.destroyDrawingCache();
		return bp;

	}

}

 

 还有一张main_underline.png的图片 
（就是这个小蓝点） 

 

基本上就是这些了。
 


 

                

        

        

    

  


    

      

        

            

              
                
                  2513LQL
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
【Android】TabLayout + ViewPager + Fragment 实现顶部导航条和页面切换

				
			

			

				

					weixin_52137816的博客
				

				

					07-25
					
					1300
					
				

			

		

		

			
				
TabLayout + ViewPager + Fragment 实现顶部导航条和页面切换

			
		

	



                

            
              



	

		

			

				
					
Android 用 TabLayout + ViewPager + Fragment 实现顶部、底部导航栏

				
			

			

				

					QDJdeveloper
				

				

					05-06
					
					6179
					
				

			

		

		

			
				
这是我们 Material Design 系列的第四篇分享了，对 Material Design 还不是太清楚的可以先过前几篇大概的了解一下，今天我们主要通过实现顶部和底部导航栏的功能来了解又一个 Material Design 的控件 TabLayout 的使用，在移动应用开发中，由于屏膜大小的限制，使得顶部、底部 Tab 导航栏的使用非常的广泛，相信大家在实际开发过程中也是经常遇到，以前可以通

			
		

	



              


  
              

                


	

		

			

				
					
Android利用ViewPage2+TabLayout实现顶部导航栏

					
最新发布

				
			

			

				

					LIUCHANGSHUO的博客
				

				

					06-03
					
					606
					
				

			

		

		

			
				
Android利用ViewPage2+TabLayout实现顶部导航栏

			
		

	





	

		

			

				
					
Android顶部导航

				
			

			

				

					二十一克阳光！的博客
				

				

					12-01
					
					697
					
				

			

		

		

			
				
安卓顶部导航使用的是TabLayout和ViewPager的结合，布局代码如下：
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/re...

			
		

	



		

			
		



	

		

			

				
					
Android 代码实现viewPager+fragment 模仿今日头条的顶部导航

				
			

			

				

					未来很长，但我会努力的走下去。
				

				

					08-01
					
					848
					
				

			

		

		

			
				
Android 代码实现viewPager+fragment 模仿今日头条的顶部导航

			
		

	





	

		

			

				
					
Android 自定义视图 顶部导航

				
			

			

				

					爱开发
				

				

					02-21
					
					1423
					
				

			

		

		

			
				
实现步骤：
1.新建NavigationBar类
package com.example.custombar;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import and

			
		

	





	

		

			

				
					
【Android】viewpager+fragment实现界面滑动，顶部导航也滑动

				
			

			

				

					catshitone的专栏
				

				

					07-12
					
					1072
					
				

			

		

		

			
				
Android ViewPager和Fragment实现顶部导航界面滑动效果
原帖地址：http://blog.163.com/shexinyang@126/blog/static/13673931220157552844552/



如果某一天，原链接失效了，请下载我事先保存好的网页文件（点击下载）。


原帖代码很好懂，但是有几点楼主解释的不是很详细。
1.关于viewpa

			
		

	





	

		

			

				
					
ViewPager+fragment打造顶部导航界面滑动效果源代码

				
			

			

				

					06-04
				

			

		

		

			
				
在顶部导航界面设计中，`ViewPager` 和 `Fragment` 结合使用能够创建出丰富的滑动交互体验。  本示例源代码——`ViewPagerTest`，显然是为了演示如何利用`ViewPager`和`Fragment`构建一个顶部导航界面的滑动效果。...

			
		

	





	

		

			

				
					
ViewPager 与 Fragment相结合实现微信界面实例代码

				
			

			

				

					01-20
				

			

		

		

			
				
本教程将详细介绍如何利用ViewPager和Fragment来创建一个类似于微信的界面，以实现滑动切换页面的效果。  首先，我们来了解一下ViewPager。ViewPager是Android SDK中的一个视图容器，它继承自ViewGroup，允许用户...

			
		

	





	

		

			

				
					
Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面

				
			

			

				

					12-27
				

			

		

		

			
				
总的来说，使用`ViewPager`和`Fragment`在Android Studio中实现滑动切换界面是一个标准流程，能够帮助开发者创建功能丰富的多页面应用。通过理解并熟练掌握这些组件，你可以为用户提供更加流畅和直观的交互体验。在...

			
		

	





	

		

			

				
					
TabLayout与ViewPager实现顶部导航栏

				
			

			

				

					剑精灵的博客
				

				

					07-21
					
					937
					
				

			

		

		

			
				
布局；


&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layou...

			
		

	





	

		

			

				
					
安卓开发之-BottomNavigationView+ViewPager+Fragment实现导航栏

				
			

			

				

					qq_36159851的博客
				

				

					04-12
					
					1207
					
				

			

		

		

			
				
1.效果类似于手机qq那样的来回页面切换2.首先在build.gradle中添加依赖：compile 'com.android.support:design:25.3.1'3.然后，设置我们的activity的layout文件为：&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://s...

			
		

	





	

		

			

				
					
viewpager+indicator到达顶部时，indicator悬浮效果

				
			

			

				

					u013835855的专栏
				

				

					05-05
					
					792
					
				

			

		

		

			
				
首先感谢http://blog.csdn.net/qiushi_1990/article/details/50288131的代码，这里我对代码进行了封装和完善（demo免费下载），处理了更多可能出现的场景，使得该组件更方便使用，最后会给出使用方法和注意事项，封装后源码如下：

package com.stickynavlistview.view;

import android.content

			
		

	





	

		

			

				
					
Android中TabLayout+ViewPager+Fragment实现顶部导航栏

				
			

			

				

					qq_46269365的博客
				

				

					05-23
					
					1391
					
				

			

		

		

			
				
三个feagment布局都一样，都只有一个TextView，下面只给出一个例子。

			
		

	





	

		

			

				
					
Android仿微信底部菜单栏+顶部菜单栏（附源码）

				
			

			

				

					Evankaka的专栏
				

				

					03-07
					
					4万+
					
				

			

		

		

			
				
本文要实现仿微信微信底部菜单栏+顶部菜单栏，采用ViewPage来做，每一个page对应一个XML，当手指在ViewPage左右滑动时，就相应显示不同的page(其实就是xml)并且同时改变底部菜单按钮的图片变暗或变亮，同时如果点击底部菜单按钮，左右滑动page(其实就是xml)并且改变相应按钮的亮度。

			
		

	





	

		

			

				
					
Fragment+ViewPager+TabLayout实现主页的顶部页面导航

				
			

			

				

					一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
				

				

					10-06
					
					2209
					
				

			

		

		

			
				
首先这部分笔记是接着上一个Module写的，所以前面的那部分代码就不再赘述。

要实现Fragment+ViewPager+TabLayout实现主页的顶部页面导航

其实主页就是一个Fragment里又嵌套了ViewPager，所以我们为了区别于其他三个模块，我不再使用MyFragment，而是新建一个MyHomeFragment，在其中我联动TabLyout再嵌套ViewPager

			
		

	





	

		

			

				
					
获取屏幕的宽度用dom方式

				
			

			

				

					weixin_42577735的博客
				

				

					12-30
					
					740
					
				

			

		

		

			
				
可以使用 JavaScript 获取屏幕的宽度。
一种方法是使用 window.innerWidth 属性：
const width= window.innerWidth;

这个属性返回的是浏览器窗口的内部宽度，即除去边框和滚动条的区域的宽度。
如果要获取整个屏幕的宽度，可以使用 screen.width 属性：
const width = screen.width;

这个属性返回的是整个屏幕...

			
		

	





	

		

			

				
					
Android获取屏幕宽高的4种方法

					
热门推荐

				
			

			

				

					linzhiyong的专栏
				

				

					03-26
					
					4万+
					
				

			

		

		

			
				
方法一：
		WindowManager wm = (WindowManager) this
				.getSystemService(Context.WINDOW_SERVICE);
		int width = wm.getDefaultDisplay().getWidth();
		int height = wm.getDefaultDisplay().getHeight();
方法二：

			
		

	





	

		

			

				
					
fragment的简单使用，点击底下导航栏切换activity的fragment。

				
			

			

				

					qq_30686255的博客
				

				

					12-18
					
					3673
					
				

			

		

		

			
				
这只是一个很简单的例子，fragment里面只写了简单区分的内容。并且这里只写到了动态添加fragment，因为动态添加使用情况要比较多。
关于Fragment的介绍这里不做过多说明，详情请看鸿洋大神的解说，其实他详细的写了fragment的使用。我这里只是自己练习，然后自己记录一下fragment的这个使用而已。


先看效果图




代码
MainActivity的布局

			
		

	





	

		

			

				
					
使用ViewPager+Fragment构建微信样式界面教程

				
			

			

				

					
				

			

		

		

			
				
"使用ViewPager和Fragment实现微信界面的实例代码教程"  在Android开发中，创建复杂的、可滚动的用户界面是一项常见的任务。此实例教程聚焦于如何利用ViewPager与Fragment结合，来构建一个类似微信的界面。ViewPager...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值