«

用Fragment+ViewPager搭建万能的android界面

时间：2024-3-2 17:35     作者：韩俊     分类： Android

android由于受限于屏幕的尺寸，我们尽可能的想要在界面上显示更多的东西。先来两张图

一个是360的，一个是汽车之家。今天这篇文章就来搭建这个框架，到时候只需要往里面填充内容就行了。搭建完了之后效果图。


当然了，不是专业美工，画面比较丑，哈哈。滑动条啊，图片呀自己加就行了，现在只负责打框架。步奏呀乱七八糟的就不说了，直接上代码。

MainActivity：

package com.sunnix.main;
import java.util.ArrayList;
import java.util.List;
import com.sunnix.fragment.HomePageFragment;
import com.sunnix.fragment.MinePageFragment;
import com.sunnix.fragment.RecommendPageFragment;
import com.sunnix.fragment.SearchPageFragment;
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.FragmentTransaction;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;
import android.widget.TextView;
public class MainActivity extends FragmentActivity {
    private FrameLayout mMainFrameLayout;
    private TextView mHomePageTextView;
    private TextView mRecommendPageTextView;
    private TextView mSearchPageTextView;
    private TextView mMinePageTextView;
    private List<Fragment> mFragmentList=new ArrayList<Fragment>();     
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFragment();
        initView();
    }
    public void initFragment(){             
        HomePageFragment homePageFragment=new HomePageFragment();
        RecommendPageFragment recommendPageFragment=new RecommendPageFragment();
        SearchPageFragment searchPageFragment=new SearchPageFragment();
        MinePageFragment minePageFragment=new MinePageFragment();
        mFragmentList.add(homePageFragment);
        mFragmentList.add(recommendPageFragment);
        mFragmentList.add(searchPageFragment);
        mFragmentList.add(minePageFragment);    
        FragmentManager fragmentManager=getSupportFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.mainFrameLayoutId, homePageFragment);
        transaction.commit();       
    }
    public void initView(){
        mMainFrameLayout=(FrameLayout)findViewById(R.id.mainFrameLayoutId);     
        mHomePageTextView=(TextView)findViewById(R.id.homePageTextViewId);
        mRecommendPageTextView=(TextView)findViewById(R.id.recommendPageTextViewId);
        mSearchPageTextView=(TextView)findViewById(R.id.searchPageTextViewId);
        mMinePageTextView=(TextView)findViewById(R.id.minePageTextViewId);      
        mHomePageTextView.setOnClickListener(new MyTextViewClickListener(0));
        mRecommendPageTextView.setOnClickListener(new MyTextViewClickListener(1));
        mSearchPageTextView.setOnClickListener(new MyTextViewClickListener(2));
        mMinePageTextView.setOnClickListener(new MyTextViewClickListener(3));
    }
    class MyTextViewClickListener implements OnClickListener{
        int location;
        public MyTextViewClickListener(int location){
            this.location=location;
        }
        @Override
        public void onClick(View arg0) {
            FragmentManager fragmentManager=getSupportFragmentManager();
            FragmentTransaction transaction=fragmentManager.beginTransaction();
            transaction.replace(R.id.mainFrameLayoutId, mFragmentList.get(location));
            transaction.commit();
        }       
    }  
}

MainActivity对应的Layout：

<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"
    android:background="#ffffff">

    <FrameLayout
        android:id="@+id/mainFrameLayoutId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        android:background="#000000">
        <TextView
            android:id="@+id/homePageTextViewId"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="首页"/>
        <TextView
            android:id="@+id/recommendPageTextViewId"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="推荐"/>
        <TextView
            android:id="@+id/searchPageTextViewId"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="发现"/>
        <TextView
            android:id="@+id/minePageTextViewId"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="我的"/>
    </LinearLayout>
</LinearLayout>

然后创建四个Fragment，当用户点击底部的文字时，只需要吧相应的Fragment装入FrameLayout即可，第一个是首页，首页中包含了一个ViewPager，其他的比如：推荐、发现、我的，都是空白的，为了以示区别，不同的页写上相应页的名称。

首页：

package com.sunnix.fragment;
import java.util.ArrayList;
import java.util.List;
import com.sunnix.main.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class HomePageFragment extends Fragment{
    private ViewPager mHomePageViewPager;
    private List<View> mViewPagerList=new ArrayList<View>();
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View v=inflater.inflate(R.layout.home_page_fragment, null);
        mHomePageViewPager=(ViewPager)v.findViewById(R.id.homePageViewPager);
        initViewPager(inflater);
        return v;
    }
    public void initViewPager(LayoutInflater inflater){
        View gameView=inflater.inflate(R.layout.home_game_view, null);
        View softView=inflater.inflate(R.layout.home_soft_view, null);
        View rankView=inflater.inflate(R.layout.home_rank_view, null);
        View mustView=inflater.inflate(R.layout.home_must_view, null);
        mViewPagerList.clear();
        mViewPagerList.add(gameView);
        mViewPagerList.add(softView);
        mViewPagerList.add(rankView);
        mViewPagerList.add(mustView);
        mHomePageViewPager.setCurrentItem(0);
        mHomePageViewPager.setAdapter(new MyPageAdapter(mViewPagerList));
        mHomePageViewPager.setOnPageChangeListener(new MyPageListener());
    }
    class MyPageAdapter extends PagerAdapter{
        private List<View> list;
        public MyPageAdapter(List<View> list){
            this.list=list;
        }
        @Override
        public int getCount() {
            return list.size();
        }
        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0==arg1;
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(list.get(position));
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(list.get(position));
            return list.get(position);
        }               
    }
    class MyPageListener implements OnPageChangeListener{
        @Override
        public void onPageScrollStateChanged(int arg0) {            
        }
        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {            
        }
        @Override
        public void onPageSelected(int arg0) {  
        }       
    }
}

对应的Layout文件： 
<?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:background="#ffffff">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        android:background="#66ffff">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="游戏"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="软件"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="排行"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="必备"/>
    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/homePageViewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>   
</LinearLayout>
推荐、发现、我的，这三个页都是空白的，就发一个吧： 
import com.sunnix.main.R;

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

public class MinePageFragment extends Fragment{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View v=inflater.inflate(R.layout.mine_page_fragment, null);
        return v;
    }
}

对应的Layout文件： 
<?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:background="#ffffff">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="minePage"
        android:textSize="15pt"/>  
</LinearLayout>
到这里呢，基本就结束了，大体思路就是树状结构，一层套一层。大概画了一个示意图

代码有的地方写不是很精练，也不是很健壮，List的非空判断等等，字数有限，在实际中自己加上。写的不好的地方欢迎指出。有需要源码的留下邮箱。


标签: android

热门推荐

1 LinearLayout设置 weight 无法绘制的问题
2 Android的材料设计兼容库（Design Support Library）
3 Android 中的 Service 全面总结
4 解决viewpager懒加载的问题
5 android 性能优化
6 Android通过BLE传输文件遇到问题怎么解决
7 Android多点触控技术实战，自由地对图片进行缩放和移动
8 Listview的onItemClickListener无法响应的解决方法
9 Android学习 - Android断点续传核心代码
10 android 4.0 安全模式分析

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章