增加四个新的UI

lavor-zl · May 26, 2016 · 66e28a8 · 66e28a8
1 parent ad6b430
commit 66e28a8
Show file tree

Hide file tree

Showing 155 changed files with 6,796 additions and 1 deletion.
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/Android UI Libs之Android-ObservableScrollView.md b/Android UI Libs之Android-ObservableScrollView.md
@@ -0,0 +1,87 @@
+#Android UI Libs之Android-ObservableScrollView  
+***  
+#1. 说明
+[Android-ObservableScrollView](https://github.com/ksoichiro/Android-ObservableScrollView)，顾名思义，Android上观察滚动的视图，可以监听滚动视图的滚动状态。它可以很简单地与Toolbar进行交互，并且很方便地创建Material Design的app。 
+
+#2. 配置  
+***  
+在模块的build.gradle中添加依赖：`compile 'com.github.ksoichiro:android-observablescrollview:1.5.0'`  
+
+#3. 基本使用  
+***  
+[Android-ObservableScrollView](https://github.com/ksoichiro/Android-ObservableScrollView)提供一些可以观察滚动事件的滚动视图：  
+- `ObservableGridView`：扩展自`GridView`  
+- `ObservableListView`：扩展自`ListView`    
+- `ObservableRecyclerView`：扩展自`RecyclerView`    
+- `ObservableScrollView`：扩展自`ScrollView`    
+- `ObservableWebView`：扩展自`WebView`    
+
+我以`ObservableListView`来说明其基本使用方法：   
+***  
+在xml中定义`ObservableListView` ：
+```  
+<com.github.ksoichiro.android.observablescrollview.ObservableListView
+        android:id="@+id/list_view"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+</com.github.ksoichiro.android.observablescrollview.ObservableListView>  
+```  
+
+在java文件中对`ObservableListView`的相关操作：  
+```  
+        this.listview = (ObservableListView) findViewById(R.id.list_view);
+        ArrayList<String> items = new ArrayList<String>();
+        for (int i = 1; i <= 100; i++) {
+            items.add("数据 " + i);
+        }
+        //为listview设置Adapter
+        listview.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,items));
+        //为listview设置滚动回调观察者
+        listview.setScrollViewCallbacks(this);  
+```  
+所在Activity实现了`ObservableScrollViewCallbacks`接口，并覆盖该接口中的所有方法：  
+```  
+ /**
+     * 滚动时
+     * @param scrollY
+     * @param firstScroll
+     * @param dragging
+     */
+    @Override
+    public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
+        Log.i("onScrollChanged","Y轴的坐标："+scrollY);
+
+    }
+    /**
+     * 按下时
+     */
+    @Override
+    public void onDownMotionEvent() {
+
+    }
+    /**
+     * 拖曳结束或者取消时
+     * @param scrollState
+     */
+    @Override
+    public void onUpOrCancelMotionEvent(ScrollState scrollState) {
+        if(scrollState==ScrollState.DOWN){
+            Log.i("onUpOrCancelMotionEvent","向下滚动");
+        }else if(scrollState==ScrollState.UP){
+            Log.i("onUpOrCancelMotionEvent","向上滚动");
+        }else {
+            Log.i("onUpOrCancelMotionEvent","停止滚动");
+        }
+    }  
+```  
+
+**即使调用了`listview.setScrollViewCallbacks(this)`方法，listview还可以调用`listview.setOnScrollListener()`，它们会同时起作用。**  
+
+[Android-ObservableScrollView](https://github.com/ksoichiro/Android-ObservableScrollView)还给出了很多交互的[Activity](https://github.com/ksoichiro/Android-ObservableScrollView/tree/master/samples/src/main/java/com/github/ksoichiro/android/observablescrollview/samples)。  
+
+
+程序源代码下载：[https://github.com/lavor-zl/UILibs](https://github.com/lavor-zl/UILibs)  
+
+
+**欢迎关注我的微信公众号：Android技术漫谈**  
+![](http://i.imgur.com/u75x3BP.jpg)
diff --git a/Android UI Libs之AndroidTreeView.md b/Android UI Libs之AndroidTreeView.md
@@ -0,0 +1,118 @@
+#Android UI Libs之AndroidTreeView   
+***  
+#1. 说明  
+***  
+[AndroidTreeView](https://github.com/bmelnychuk/AndroidTreeView)，顾名思义，Android上面的树形视图。  
+该库的特点：  
+- 可扩展与销毁的N叉树  
+- 为节点自定义值，视图，样式  
+- 旋转屏幕后保存状态  
+- 节点的选中模式  
+- 动态添加，删除节点  
+
+**注意：接近Android4.0的版本树的层次太深可能很容易导致程序崩溃。**  
+
+#2. 配置  
+***  
+在模块的build.gradle中添加依赖：`compile 'com.github.bmelnychuk:atv:1.2.+'`  
+
+#3. 基本使用  
+***  
+```  
+    /**
+     * AndroidTreeView的基本使用
+     */
+    public void baseUsage(){
+        //创建根节点
+        TreeNode root = TreeNode.root();
+        //创建一般节点
+        TreeNode parent = new TreeNode("父节点");
+        TreeNode child0 = new TreeNode("子节点1");
+        TreeNode child1 = new TreeNode("子节点2");
+        //添加子节点
+        parent.addChildren(child0, child1);
+        root.addChild(parent);
+        //创建树形视图
+        AndroidTreeView tView = new AndroidTreeView(this, root);
+        //将树形视图添加到layout中
+        layout.addView(tView.getView());
+    }  
+``` 
+
+程序运行界面如下：  
+![](http://i.imgur.com/EqE6odN.gif)  
+
+#4. 高级使用  
+***  
+我们可以看到上一节基本使用中的界面很丑，节点中只有文本信息，我们可以为节点自定义视图来提高用户体验。  
+
+为节点创建已定义视图，继承`TreeNode.BaseNodeViewHolder`并重写`createNodeView`方法：  
+```
+public class MyHolder extends TreeNode.BaseNodeViewHolder<IconTreeItem> {
+    ...
+    @Override
+    public View createNodeView(TreeNode node, IconTreeItem value) {
+        final LayoutInflater inflater = LayoutInflater.from(context);
+        final View view = inflater.inflate(R.layout.layout_profile_node, null, false);
+        TextView tvValue = (TextView) view.findViewById(R.id.node_value);
+        tvValue.setText(value.text);
+
+        return view;
+    }
+    ...
+    public static class IconTreeItem {
+        public int icon;
+        public String text;
+    }
+}
+```  
+将节点与ViewHolder联系起来：  
+```  
+  IconTreeItem nodeItem = new IconTreeItem();
+  TreeNode child1 = new TreeNode(nodeItem).setViewHolder(new MyHolder(mContext));  
+```  
+
+
+本库中示例中有8个自定义的ViewHolder，我利用其中之一`IconTreeItemHolder`来实现自定义节点视图：  
+```  
+    /**
+     * AndroidTreeView的高级使用：为节点自定义视图
+     */
+    public void customViewForNode(){
+        //创建根节点
+        TreeNode root = TreeNode.root();
+        //创建节点item
+        IconTreeItemHolder.IconTreeItem nodeItem = new IconTreeItemHolder.IconTreeItem(R.string.ic_laptop,"我的设备");
+        IconTreeItemHolder.IconTreeItem nodeItem2 = new IconTreeItemHolder.IconTreeItem(R.string.ic_folder,"文件夹");
+        IconTreeItemHolder.IconTreeItem nodeItem3 = new IconTreeItemHolder.IconTreeItem(R.string.ic_drive_file,"文件");
+        //创建一般节点
+        TreeNode device = new TreeNode(nodeItem);
+        TreeNode fold = new TreeNode(nodeItem2);
+        TreeNode file = new TreeNode(nodeItem3);
+        //添加子节点
+        fold.addChild(file);
+        device.addChild(fold);
+        root.addChild(device);
+        //创建树形视图
+        AndroidTreeView tView = new AndroidTreeView(this, root);
+        //设置树形视图开启默认动画
+        tView.setDefaultAnimation(true);
+        //设置树形视图默认的样式
+        tView.setDefaultContainerStyle(R.style.TreeNodeStyleCustom);
+        //设置树形视图默认的ViewHolder
+        tView.setDefaultViewHolder(IconTreeItemHolder.class);
+        //将树形视图添加到layout中
+        layout.addView(tView.getView());
+    }  
+```  
+程序运行后的界面是这样的：  
+![](http://i.imgur.com/UEq4UaT.gif)  
+
+程序源代码下载：[https://github.com/lavor-zl/UILibs](https://github.com/lavor-zl/UILibs)  
+
+
+**欢迎关注我的微信公众号：Android技术漫谈**  
+![](http://i.imgur.com/u75x3BP.jpg)
+
+
+
diff --git a/Android UI Libs之CircleIndicator.md b/Android UI Libs之CircleIndicator.md
@@ -0,0 +1,82 @@
+#Android UI Libs之CircleIndicator  
+***  
+#1. 说明  
+***  
+[CircleIndicator](https://github.com/ongakuer/CircleIndicator)，顾名思义，圆形指示器，只一个可以用来做轮播的第三方库。  
+
+#2. 配置  
+***  
+在模块的build.gradle中添加依赖：`compile 'me.relex:circleindicator:1.2.1@aar'`   
+
+#3. 基本使用  
+***  
+在xml布局文件中定义`ViewPager`与`CircleIndicator`：  
+```  
+    <RelativeLayout
+        android:layout_width="match_parent"
+        android:layout_height="150dp">
+        <android.support.v4.view.ViewPager
+            android:id="@+id/view_pager"
+            android:layout_width="match_parent"
+            android:layout_height="150dp">
+        </android.support.v4.view.ViewPager>
+        <me.relex.circleindicator.CircleIndicator
+            android:id="@+id/indicator"
+            android:layout_width="match_parent"
+            android:layout_height="48dp"/>
+    </RelativeLayout>  
+```  
+**注意：`ViewPager`与`CircleIndicator`一般放在同一个`RelativeLayout`中，并且`CircleIndicator`放在后面**  
+
+在java文件中的相关操作：  
+```  
+        this.indicator = (CircleIndicator) findViewById(R.id.indicator);
+        this.viewpager = (ViewPager) findViewById(R.id.view_pager);
+        List<Fragment> list=new ArrayList<>();
+        myFragment1 = new MyFragment(R.drawable.image1);
+        myFragment2 = new MyFragment(R.drawable.image2);
+        myFragment3 = new MyFragment(R.drawable.image3);
+        list.add(myFragment1);
+        list.add(myFragment2);
+        list.add(myFragment3);
+        MyPagerAdapter myPagerAdapter=new MyPagerAdapter(getSupportFragmentManager(),list);
+        viewpager.setAdapter(myPagerAdapter);
+        indicator.setViewPager(viewpager);  
+```
+`MyFragment`是我自定义的Fragment，它里面包含一个`ImageView`，`MyPagerAdapter`是我自定义的Adapter。  
+
+程序运行界面：  
+![](http://i.imgur.com/o79UcNo.gif)  
+
+我们发现可以轮播，但是不能循环，我们想要循环怎么办，别担心，下一节我们来实现循环轮播。  
+
+`CircleIndicator`还有下面一些属性，属性命名很规则，一看名字就知道属性是干什么的：
+- app:ci_width：
+- app:ci_height
+- app:ci_margin
+- app:ci_drawable
+- app:ci_drawable_unselected
+- app:ci_animator
+- app:ci_animator_reverse
+- app:ci_orientation (default:horizontal)
+- app:ci_gravity (default:center)
+
+#4. 高级使用  
+***  
+该库的LoopingViewPager目录下面为我们提供了循环的ViewPager，我们需要将其中的`LoopPagerAdapterWrapper`，`LoopViewPager`这两个类复制到我们的项目中来就。然后要将`android.support.v4.view.ViewPager`改为`com.lavor.circleindicatordemo.LoopViewPager`。  
+- 当我们的Adapter是继承自`FragmentPagerAdapter` 时，无法使用该循环的ViewPager（即`LoopViewPager`）  
+- 当我们的Adapter是`SamplePagerAdapter`时，`SamplePagerAdapter`是该库实例中的一个Adapter时，可以循环轮播，但是明显从最后一个滑动到第一个时，第一页显示了两次，貌似利用该库中的`LoopViewPager`还无法解决这个问题。
+
+**我们要实现循环轮播的最佳解决方案： ** 
+- 利用另一个库[LoopViewPager](https://github.com/yanzm/LoopViewPager)下面的`LoopViewPager`  
+- 修改[CircleIndicator](https://github.com/ongakuer/CircleIndicator)下面`CircleIndicator`的源代码，将`setViewPager(ViewPager viewPager)`方法中的`ViewPager`改为上面所提库中的`LoopViewPager`，并将与之关联的`ViewPager`都改为上面所提库中的`LoopViewPager`，其他关联代码对应改过来。  
+
+程序运行后的界面： 
+![](http://i.imgur.com/1NnDuJM.gif)  
+
+程序源代码下载：[https://github.com/lavor-zl/UILibs](https://github.com/lavor-zl/UILibs)   
+
+
+**欢迎关注我的微信公众号：Android技术漫谈**  
+![](http://i.imgur.com/u75x3BP.jpg)
+