android开发步步为营之71:CoordinatorLayout+AppBarLayout+RecyclerView+ViewPager打造可上下左右滑动的App主框架

       在看过很多app之后,你会发现现在很多的app的主框架是可以上下左右滑动,左右滑动,我们自然会想到用viewpager,但是上下可以滑动,而且顶部广告或者背景划上去之后,还需要保留tab标签用什么来实现?查阅过很多资料,最终发现sdk里面android support v7有CoordinatorLayout+AppBarLayout+RecyclerView,两个组件组合可以支持上下滑动效果,另外CoordinatorLayout+AppBarLayout+NestedScrollView也可以实现上下滑动效果,但是经试验证明,NestedScrollView需要本身可以滑动,也就是里面的数据超过满屏需要滑动,才能将AppBarLayout划上去。

        先给出效果图,不好意思,不知道怎么弄动态图,给出两张静态效果图。偷笑

       

         OK,现在我们来实现这个功能,这里给出主要的步骤。

         第一步:引入V7的支持库

         build.gradle里面引入

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'
}

         第二步:设计主页面activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <LinearLayout
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="#123456"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:gravity="center_vertical"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="the best app"/>
            </LinearLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="#810e88"/>

    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_body"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>

</android.support.design.widget.CoordinatorLayout>


        第三步:编写MainActivity.java

package com.figo.study;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
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 android.util.Log;
import android.view.View;
import com.figo.study.fragment.ActivityFragment;
import com.figo.study.fragment.ExchangeFragment;
import com.figo.study.fragment.MeFragment;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity {
    private ViewPager mVpBody;
    ArrayList<Fragment> fragmentsList;
    private int currIndex;
    List<String> titles;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViewPager();
    }

    private void initViewPager() {
        try {
            TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabs);
            titles = new ArrayList<>();
            titles.add("Exchange");
            titles.add("Activity");
            titles.add("Me");

            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(0)));
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(1)));
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(2)));

            mTabLayout.setTabTextColors(getResources().getColor(R.color.white), getResources().getColor(R.color.selected));

            mVpBody = (ViewPager) findViewById(R.id.vp_body);
            fragmentsList = new ArrayList<Fragment>();
            Bundle bundle = new Bundle();
            Fragment exchangeFragment = ExchangeFragment.newInstance(
                    MainActivity.this, bundle);
            Fragment activityFragment = ActivityFragment.newInstance(
                    MainActivity.this, bundle);
            Fragment meFragment = MeFragment.newInstance(
                    MainActivity.this, bundle);


            fragmentsList.add(exchangeFragment);
            fragmentsList.add(activityFragment);
            fragmentsList.add(meFragment);
            TabFragmentPagerAdapter tabFragmentPagerAdapter = new TabFragmentPagerAdapter(
                    getSupportFragmentManager(), fragmentsList);
            mVpBody.setAdapter(new TabFragmentPagerAdapter(
                    getSupportFragmentManager(), fragmentsList));
            mVpBody.setCurrentItem(0);
            mVpBody.setOnPageChangeListener(new MyOnPageChangeListener());


            mTabLayout.setupWithViewPager(mVpBody);
            mTabLayout.setTabsFromPagerAdapter(tabFragmentPagerAdapter);

        } catch (Exception e) {
            Log.e("initViewPager", "initViewPager", e);
        }

    }

    public class TabFragmentPagerAdapter extends FragmentPagerAdapter {
        ArrayList<Fragment> mFragmentsList;

        public TabFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        public TabFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragmentsList) {
            super(fm);
            mFragmentsList = fragmentsList;
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentsList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentsList.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return titles.get(position);
        }
    }

    public class TabOnClickListener implements View.OnClickListener {
        private int index = 0;

        public TabOnClickListener(int i) {
            index = i;
        }

        @Override
        public void onClick(View v) {
            mVpBody.setCurrentItem(index);
        }
    }

    ;

    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageSelected(int arg0) {

            switch (arg0) {
                case 0:


                    break;
                case 1:

                    break;
                case 2:

                    break;

            }
            currIndex = arg0;

        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    }
}



         第四步:编写fragment,这里给出其中一个ActivityFragment.java

package com.figo.study.fragment;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.figo.study.R;

/**
 * Activity
 */
public class ActivityFragment extends android.support.v4.app.Fragment {
    public static ActivityFragment newInstance(Context context,Bundle bundle) {
        ActivityFragment newFragment = new ActivityFragment();
        newFragment.setArguments(bundle);
        return newFragment;

    }

    private RecyclerView mRecyclerView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        mRecyclerView =
                (RecyclerView) inflater.inflate(R.layout.fragment_activity_new, container, false);
        return mRecyclerView;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(mRecyclerView.getContext()));
        mRecyclerView.setAdapter(new RecyclerViewAdapter(getActivity()));
    }




    public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

        private Context mContext;

        public RecyclerViewAdapter(Context mContext) {
            this.mContext = mContext;
        }

        @Override
        public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view =
                    LayoutInflater.from(parent.getContext()).inflate(R.layout.fragment_activity, parent, false);
            return new ViewHolder(view);
        }

        @TargetApi(Build.VERSION_CODES.LOLLIPOP)
        @Override
        public void onBindViewHolder(final RecyclerViewAdapter.ViewHolder holder, int position) {
            final View view = holder.mView;

        }

        @Override
        public int getItemCount() {
            return 1;
        }

        public  class ViewHolder extends RecyclerView.ViewHolder {
            public final View mView;

            public ViewHolder(View view) {
                super(view);
                mView = view;
            }
        }
    }

}

         可以看到真正的fragment布局其实是当做recylerview的一项了。

         fragment_activity_new.xml布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rv_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

        fragment_activity.xml布局

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Activity"
        android:id="@+id/textView"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

        注意一点,fragment_activity.xml里面如有listview的话,listitem的布局必须是LinearLayout,而且必须计算listview的高度,不然上下滑动的效果不管用的。

     

      第五步:相关的样式设计style.xml文件

<style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">
    </style>

    <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#0fb73d</item>
        <item name="colorPrimaryDark">#0ba823</item>
        <item name="colorAccent">#FF4081</item>
        <item name="android:windowBackground">@color/window_background</item>
    </style>

       第六步:AndroidManifest.xml配置

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.figo.study" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.DesignDemo">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>



         有了以上6步,相信你也可以打造上下左右都可以有滑动效果的APP了大笑




版权声明:本文为博主原创文章,未经博主允许不得转载。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
Xcode7 运行空白模版报错,将AppDelegate中改为 - ( BOOL )application:( UIApplication *)application didFinishLaunchingWithOptions:( NSDictionary *)launchOptions {          return YES ; } 并删除LaunchScreen.storyboard 并在plist中删除

xcode 各种项目设置 - 2015-08-17 17:08:34

1:语言环境设置: 项目–PROJECT–info–Locailzation 2 : 手动添加项目依赖 Build Settings–Search path–Library Search Paths 加lib依赖 SRCROOT 和 PROJECT_DIR 都值的是 项目配置目录的上一层 好的:模拟器和手机都可以:” ( S R C R O O T ) / B l u e M o b i P r o j e c t / T h i r d P a r t y / B a i d u M a p I O S
我们先假设现在自己创建了个类,我们起名叫MyObject,继承于NSObject。继承知道吧,就是你这个子类(MyObject)如果什么都不写的话,和父类(NSObject)就是一模一样的。OC里几乎所有的类的根源都是NSObject,都是在NSObject的基础上增加成员变量、函数。父类不是你自己写的类,你不敢保证它是安全的,能否成功初始化,你有可能不知道里面是什么样子的。self = [super init],你可能对这步做法可能难以理解。self指向了父类初始化的内存地址。类的初始化函数如果失败会返
效果展示 工程下载地址 · 进入构建结构 首先我们新建一个工程 接下来我们拖进来一个Table View Controller,将Storyboard Entry Point指向我们的Table View Controller。原来的ViewController就可以删除了。效果如图所示 选中Table View Controller,点击上面菜单栏中Editor-Embed in-Navigation Controller 基本的工作我们都做完了,可以讲工程中没用的东西都可以删除了,方便我们进行编写东西
此blog不写API的用法只分析此参数的知识点。 今天学习安卓突然学习到了getinstalledpackages()的方法获取到安装应用信息 ,他接收一个int flags的值,然后在网上查询资料全是 将Int  值 设置为0  即比如 PackageManager manager = context.getPackageManager();// 得到包的管理者 ListPackageInfo installedPackages = manager.getInstalledPackages(0); 本想
应用已经开发出来了,下一步我们需要思考推广方面的工作。那么如何才能让更多的用户知道并使用我们的应用程序呢?在手机­­­­领域,最常见的做法就是将程序发布到某个应用商店中,这样用户就可以通过商店找到我们的应用程序,然后轻松地进行下载和安装。 说到应用商店,在Android领域真的可以称得上是百家争鸣,除了谷歌官方推出的Google Play之外,在国内还有91、豌豆荚、机锋、360等知名应用商店。当然,这些商店所提供的功能都是比较类似的,发布应用的方法也大同小异,因此这里我们就只学习如何将应用发布到Goog
Hello Triangle:OpenGL ES 2.0 版的“Hello world” 本文的文字大部分都是从《OpenGL ES 2.0 编程向导》中摘抄而来,特此说明。 该文是基于OpengGL ES 2.0的,算是本人学习OpenGL的“Hello world”吧。 一个OpengGL ES 2.0程序的实现大致如下所示: 装载顶点和片段着色器。 创建一个项目对象,联系顶点和片段着色器,链接项目。 设置视窗。 清除颜色缓冲区。 最基本的渲染。 准备工作 作为一个“Hello world”类的程序,
题目 来自于: http://hihocoder.com/contest/hiho59/problem/1 时间限制:8000ms 单点时限:1000ms 内存限制:256MB 描述 You are given a txt file, which is performance logs of a single-threaded program. Each line has three columns as follow: [Function Name] [TimeStamp] [Action] [Func
一、Android系统启动 Android框架架构图:(来自网上,我觉得这张图看起来很清晰) Linux内核启动之后就到Android Init进程,进而启动Android相关的服务和应用。 启动的过程如下图所示:(图片来自网上,后面有地址)   Android系统整个过程如下: (一) Init进程的启动 init进程,它是一个由内核启动的用户级进程。内核自行启动(已经被载入内存,开始运行, 并已初始化所有的设备驱动程序和数据结构等)之后,就通过启动一个用户级程序init的方式,完成引导进程。init始
孙广东  2015.8.15 目的: 这篇文章的主要目的是为了让您了解有关于在Unity内如何使用没有刚体的碰撞检测。 在这里,检查的只是垂直运动方向,但可以通过修改脚本,将对象添加到场景检查其他方向 (或更改cube 的位置。 unity就是 3D 的游戏引擎,带有内置物理Nvidia PhysX。游戏对象应用物理模拟必须具有刚体。它常用于碰撞检测。          假设我们只想要碰撞检测模拟物理学,然后只对碰撞检测使用物理引擎可能会降低整体性能。 有两个解决办法: 解决办法-1: 使刚体运动学和捕获