Fragment为载体可自动布局的CardView(GitHub上写开源项目初体验)

前些天一直在看Android5.0 的Material Desgin,里面新增了一个新的控件——CardView。从Google这次直接提供了CardView控件就可以看出它已经变的非常流行了。

在此之前我们可以通过设置圆角边框来模拟CardView效果,但现在既然Google已经提供了新控件就没有理由不用它了。而我之前在学自定义布局的时候写了一个CardView自动布局的小Demo——ANDROID自定义视图——仿瀑布布局(附源码)

刚好最近正好在学Git,而且也想试试CardView在5.0以前版本的使用效果,所以将它稍微改造了下写成一个Library形式的Demo放在Github上。在介绍之前先来看下演示效果:

     

简介:

刚才已经说过本文的Demo是从之前文章里的Demo改造过来的,所以需要详细了解的话推荐先阅读之前那篇文章。

下面简单介绍一下这个Demo的功能:

1.使用了Google在Android5.0提供的新控件CardView:

我在之前介绍Android 5.0 Material Desgin的文章中介绍过如何在5.0里使用CardView,这个例子则介绍如何在5.0之下使用它。

2.以Fragment为载体显示CardView:

对比上个demo,本例的CardView里面装载的不是一个简单视图,而是一个Fragment,所以我们可以把一系列的逻辑放在一个CardView之内。

3.可以动态的设置屏幕上显示的CardView数量:

在很多的app中大家都习惯使用viewpager来左右滑动视图切换fragment去显示不同的内容,但随着屏幕越来越大和平板等因素一个屏幕显示多个Fragment会更加直观并且能更加合理的利用空间。

比如演示中竖屏和横屏中屏幕上每行显示的CardView数目不同。

4.可以动态的增加和删除CardView

对比上个demo,不仅使用Fragment作为CardView的载体,并且可以动态的删除和添加CardView(添加功能还没时间写,但接口已经写好了)。

5.以Library形式放在GitHub上开源

仿照GitHub上的开源项目,我将这个Demo做成以Library形式放在
GitHub上开源,如果大家有需要可以将自定义的fragment(需要继承自library包中CardFragment)加入到以library包
中的CardManger中,并使用library包中的CardScrollView作为布局即可实现上面效果(稍后详解)

不足:

1.项目中的注解还没加。。。习惯不好应该是边写边加。。。

2.删除时CardView中的子view的触摸事件有些问题,会慢慢改进。。。

3.转屏幕或者退出重进时没做恢复和记录处理。。。

4.还有太多不足的地方,大家就看看就好了,如果大家有改进意见可以留言。如果能直接在Github上提pull request更好了。。。

使用:

1.将项目clone下来或直接下载解压:

GitHub地址为:https://github.com/a396901990/CardView_AutoLayout

2.导入eclipse中目录结构如下所示:

autolayoutLib就是我封装好的library文件

cardviewLib是Google在Android 5.0中support-7中的cardview jar包。

MainActivity是演示程序

他们的关系是cardviewLib是autolayoutLib的library,autolayoutLib是MainActivity的library

3.使用:

这里简单介绍下MainActivity里是如何使用封装好的autolayoutLib:

1.首先要使自定义的Fragment继承autolayoutLib中的CardFragment,并有些必须要调用的方法:

[java] view plaincopyprint?

  1. // 首先必须继承library包中CardFragment类
  2. public class IDFragment
  3. extends CardFragment
  4. {
  5. ImageView arrow;
  6. LinearLayout expandedView;
  7. boolean isShow = false;
  8. @Override
  9. public View onCreateView( LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState )
  10. {
  11. return super.onCreateView(inflater, container, savedInstanceState);
  12. }
  13. @SuppressLint("InflateParams")
  14. @Override
  15. public void onActivityCreated( Bundle savedInstanceState )
  16. {
  17. // 需要为该fragment的rootview设置触摸监听,具体实现看library包中CardFragment类
  18. getView().setOnTouchListener(this);
  19. super.onActivityCreated(savedInstanceState);
  20. // 需要调用CardFragment中的setCardView()方法去设置fragment的视图
  21. setCardView(getActivity().getLayoutInflater().inflate(R.layout.id_card, null, false));
  22. // 如果需要设置标题则需要调用CardFragment中的setTitle()方法
  23. setTitle("RESUME");
  24. arrow = (ImageView) getView().findViewById(R.id.arrow);
  25. expandedView = (LinearLayout) getView().findViewById(R.id.expandedView);
  26. arrow.setOnClickListener(new View.OnClickListener()
  27. {
  28. @Override
  29. public void onClick( View arg0 )
  30. {
  31. expandedView.setVisibility(isShow ? View.VISIBLE : View.GONE);
  32. arrow.setImageDrawable(isShow ? getResources().getDrawable(android.R.drawable.arrow_up_float) : getResources().getDrawable(android.R.drawable.arrow_down_float));
  33. isShow = !isShow;
  34. }
  35. });
  36. }
  37. }

主要就是以上四个注解中的内容必须要实现,剩余的就正常写fragment

2.在Activity中添加自定义的CardFragment到CardManager中:

[java] view plaincopyprint?

  1. public class MainActivity extends Activity {
  2. @Override
  3. protected void onCreate(Bundle savedInstanceState) {
  4. super.onCreate(savedInstanceState);
  5. initCrads();
  6. setContentView(R.layout.main_layout);
  7. }
  8. // 将需要显示的Fragment存放在CardManager类中,接收的类型是一个CardFragment类型的List(必须在setContentView之前调用)
  9. public void initCrads()
  10. {
  11. List<CardFragment> mCardFragments =  new ArrayList<CardFragment>();
  12. mCardFragments.add(new IDFragment());
  13. mCardFragments.add(new CalcFragment());
  14. mCardFragments.add(new PicFragment());
  15. mCardFragments.add(new ClockFragment());
  16. CardManager.getInstance().setCardFragments(mCardFragments);
  17. }
  18. }

3.Activity中的布局文件要使用CardScrollView:

[html] view plaincopyprint?

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:auto="http://schemas.android.com/apk/res-auto"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="vertical" >
  7. <com.dean.autolayout.CardScrollView
  8. android:id="@+id/myScrollView"
  9. android:layout_width="match_parent"
  10. android:layout_height="match_parent"
  11. android:layout_margin="5dip"
  12. auto:columns="1" >
  13. </com.dean.autolayout.CardScrollView>
  14. </LinearLayout>

如何使用已经介绍完毕,下面来简单介绍一下autolayoutLib


autolayoutLib:

所有逻辑都封装在这个library中,大家可以根据上面介绍的autolayoutLib使用步骤来作为切入口来了解它。

简单回忆下上面使用autolayoutLib的三步骤:

1.首先要使自定义的Fragment继承autolayoutLib中的CardFragment

2.在Activity中添加自定义的CardFragment到CardManager中

3.Activity中的布局文件要使用CardScrollView

所以可以看出autolayoutLib中无非就是这3个类。

下面来看下它的目录结构:

主要需要看的我已经用红线框起来了,下面来简单介绍一下它们的作用:


CardFragmentAdapter:

继承自FragmentPagerAdapter,作用就是CardFragment的适配器。

CardScrollView:

继承自ScrollView,在这个layout中存放了所有需要显示的视图,CardFragment的添加删除和适配器的操作都在其中。

CardManager:

一个存放所有CardFragment的model类,我将其定义为单例模式这样可以在全局保存一份就可以了

AutoCardLayout

通过这个自定义的laiyout可以实现根据设置的列值来显示每行的CardView数量,别且会按照类似于瀑布布局的方式来显示他们。具体可以看之前的文章有详细讲这个类。

CardFragment:

自定义Fragment的基类,继承自Fragment。封装了一些处理CardFragment的方法。

cardview_container.xml:

CardView的布局类,可以在这里设置CardView的圆角大小和背景等等。

时间: 2024-08-03 22:31:12

Fragment为载体可自动布局的CardView(GitHub上写开源项目初体验)的相关文章

GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举,越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。

1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便地使用所有版本的Android动作栏的设计模式. 对于Android 4.0及更高版本,ActionBarSherlock可以自动使用本地ActionBar实现,而对于之前没有ActionBar功能的版本,基于Ice Cream Sandwich的自定义动作栏实现将自动围绕布局.能够让开发者轻松开发

在github上参与开源项目贡献代码

1 登录github, 点击自己感兴趣的repository的fork按钮,这样自己的github主页会有一个拷贝. 2 在自己本地修改同时保持和原来的repository同步: git remote -v, 看看自己当前git repository的configure, origin 表示自己的repository 要添加一个新的远程仓库,可以指定一个简单的名字,以便将来引用,运行 git remote add [shortname] [url]:git remote add upstream

android studio学习----添加项目依赖包补充---添加github上的开源项目为库

导入maven中的库 如果开源库作者有将代码放到Maven库中,我们可以在gradle配置中直接引入,类似如下: compile 'com.github.dmytrodanylyk.android-process-button:library:1.0.1' 一般我们可以在开源库的github页面上面看有没有这样一个地址,或者到maven库中根据包名搜索有没有,我们前面这个引入的项目分三个部分 group:name:version,我们引入其他的包也有遵守这个规则. 导入gradle构建的开源库

在github上参与开源项目日常流程

转载自:http://blog.csdn.net/five3/article/details/9307041 1. 注册帐号 打开https://github.com/,填写注册信息并提交. 2. 登录帐号 打开https://github.com/login,输入注册的用户名.密码并提交. 3. 访问项目主页 进入具体项目的主页,如:https://github.com/five3/testdoc. 4. fork项目 点击页面右上角处的fork按钮,这样github就会在你的帐户下fork一

Pull Request的正确打开方式(如何在GitHub上贡献开源项目)

GitHub的官方帮助如下: Fork A Repo: https://help.github.com/articles/fork-a-repo Using Pull Requests: https://help.github.com/articles/using-pull-requests Merging a pull request: https://help.github.com/articles/merging-a-pull-request Closing a pull request:

Git命令之从GitHub上下载开源项目

1,先在本地创建一个目录,作为本地仓库,如: 2,使用Git init 初始化仓库,git初始化完成后,会生成一个隐藏的git文件如: 3,clone Git项目,如: 4,这个项目就是合Github远程仓库克隆下来的项目,此时两者保持同步:可以对代码修改,并上传.

使用jitpack来获取github上的开源项目

在开发中我们需要经常使用第三方依赖库,在构建工具Gradle或maven中声明依赖, 大部分使用的是maven中心仓库或者阿里云仓库等等,但是这样也存在一个问题,上述仓库的库虽然简单快捷好用,但并不是全部资源都有,而且也不是实时更新, 我们需要的可能是github开源仓库内的最新版或者某个tag,怎样直接在项目的build文件中直接声明maven依赖或gradle依赖?这个时候,github仓库代码这个神奇就出现了. 使用起来非常简单: 1. 声明添加jitpack库为依赖仓库: allproj

github上下载开源项目

1.首先获取到设置信息 2.找到克隆的路径(本步骤不包含下载.zip的方法) 3.打开 Git Shell ->输入: cd ../../ ->输入: cd  想要安装的路径 ->输入:git clone https://github.com/Sioxas/vue-music.git ->回车 4.输入:cd vue-music(文件名称) ->回车 5.参考第1步的设置信息 输入:npm install ->回车 (此过程时间较长,需要耐等待) 6.参考第1步的设置信

向github上传一个项目

1.在Github上新建一个项目 然后在你需要提交的目录下 echo "# demo" >> README.md //新建README.md,然后把你要写的简要和注释写到里面git init 初始化现存的版本库git add README.md git commit -m "first commit" git remote add origin https://github.com/zlmhs/-.git 添加远程仓库路径git push -u orig