在写前面的小程序入门项目时，发现有两个很常用而且觉得也算比较重要的知识点，这里记录下：

页面数据绑定

比如你的页面需要显示一个Hello字符串，这个这个字符串可能会根据某些情况会动态变化，这个时候就需要进行数据绑定展示了

在wxml文件布局如下：

1

<view>{{message}}</view>

在js中设置好变量如下：

1
2
3
4
5
6

Page({
	data: {
		message: "Hello",
		number: 1
	}
});

就这样data里面的message属性就可以通过view组件展示出来了，看了上面的写法，也很容易明白，组件展示数据信息时是通过

1

{{属性名称}}

这的写法与data里面的属性进行绑定的。

如果在数据信息展示出来后，后面要更新这个属性信息的展示的话，就不能简单的通过this.data.message="Hello World"来实现，因为这样是无法达到改变数据信息的目的的。小程序中改变数据信息要求使用函数setData()函数来实现。例如上面我们修改message`的值的话需要进行如下操作：

1
2
3

this.setData({
	message: "Hello World"
});

通过该函数更新之后，页面上会自动的更新展示，而不需要我们去进行额外的操作，微信将数据的展示与更新进行了分离，只要你使用特定的方法修改属性值，界面就会自动更新，这样的实方式比起android中的手动通知更新要方便很多

页面跳转参数

小程序中从一个页面跳转到另外一个页面有几种方式，这里我以wx.navigateTo()跳转进行说明：
我从index页面跳转到logs页面，很简单

1
2
3

wx.navigateTo({
	url: '../log/logs
})

那如果我在跳转的同时要向logs页面传递参数该怎么办呢，也很简单，直接在url后拼接相关参数即可(与http中的get请求的传参方式是一样的)

1
2
3

wx.navigateTo({
	url: '../video/video?message=' + this.data.message + "&number=" + this.data.number
})

参数是传过去了，那在logs页面中该如何获取这些参数呢？其实也很简单：

1
2
3
4

onLoad: function (options) {
	var message = options.message;
	var number = options.number;
}

如上所示，我们在新页面的onLoad函数中就可以直接获取到传递过来的参数信息。

点击View传参

在我前面的文章 微信小程序之入门项目中点击视频列表中的某一项跳转到视频播放页面，而在点击列表中的某一项时，需要获取当前项的数据信息，如果我想通过点击事件就将这些数据信息作为参数传递过去该怎么做呢？代码如下：

1

<view wx:for="{{tab.videos}}" wx:for-item="video" data-video="{{video}}" wx:key="*this" bindtap="onItemClick">

上面的代码通过for循环实现了一个列表，并为每一项绑定了点击事件，而view组件实现中有一个属性是微信没有提供的：data-video，这个属性是我们手动添加上去的，微信中如果要在wxml中传递参数到点击事件中的话则可以通过data-**的形式进行传参(**号即为参数名称)，此处是将每一项数据video作为参数进行传递，同时参数名称为video

接下来再来看看点击事件中如何获取该video信息：

1
2
3
4
5

onItemClick: function (event) {
    var video = event.currentTarget.dataset.video;
    var url = video.url;
    var title = video.title;
  }

没错，就像代码中写的，在点击事件中我们可以通过event.currentTarget.dataset获取传过来的video信息，这个参数在调试的时候也是可以通过event对象看到的

原创文章，本文采用知识共享署名 2.5(中国大陆许可协议)进行许可，欢迎转载，但转载请注明来自ittiger.cn，并保证转载后文章内容的完整性。本人(laohu)保留所有版权相关权利。

做过android的都知道在android里面实现Tab切换非常简单，使用android提供的TabLayout+ViewPager很容器就实现了Tab切换的效果。

但是小程序中是没有提供类似可以直接使用的组件，因此想要实现此功能需要我们自己去编码实现。在上一篇文章中我提到的小程序练手项目就实现了Tab切换效果，具体效果图可以参考文章微信小程序入门项目。

实现思路

翻看小程序的文档可以发现，微信为我们提供了一个swiper组件，通过该组件可以实现view的滑动切换，它的功能与android中的ViewPager是类似的。因此实现Tab切换现在只需要实现头部的Tabbar即可，对于该功能我们可以采用多个横向排列的view组件构成一个Tabbar，每个view组件作为一个Tab项，然后再将其点击事件与swiper进行关联即可实现Tab的点击和滑动切换功能。而对于Tabbar的当前Tab项下面的指示器我们可以采用border-bottom样式实现，也可以单独使用一个view组件作为指示器，我这里采用的是第二种方式实现指示器。

代码

实现代码如下：

页面布局代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<view class="page">
  <view class="navbar">
      <block wx:for="{{tabs}}" wx:key="*this">
          <view id="{{index}}" class="navbar__item {{activeIndex == index ? 'navbar__item_on' : ''}}" bindtap="navTabClick">
            <view class="navbar__title">{{item.name}}</view>
          </view>
      </block>
      <view class="navbar__slider" style="width: {{sliderWidth}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
  </view>
  <view style="position: absolute;top: 68rpx;width: 100%;height:{{contentHeight}}px">
    <swiper current="{{activeIndex}}" duration="300" bindchange="bindChange">
      <swiper-item>
        <view>热门视频</view>
      </swiper-item>
      <swiper-item>
        <view>比赛集锦</view>
      </swiper-item>
      <swiper-item>
        <view>你懂专栏</view>
      </swiper-item>
      <swiper-item>
        <view>天下足球</view>
      </swiper-item>
    </swiper> 
  </view>
</view>

布局样式代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

view , page {
  padding: 0px;
  margin: 0px;
}
.page {
  height: 100%;
}
.navbar {
    display: flex;
    position: absolute;
    z-index: 500;
    top: 0;
    width: 100%;
}
.navbar__item {
    position: relative;
    display: block;
    flex: 1;
    padding: 10rpx 0;
    text-align: center;
    font-size: 0;
    height: 48rpx;
    line-height: 48rpx;
    <!-- NavBar的总高度为：height + padding-top + padding-bottom = 68rpx -->
}
.navbar__item_on {
    color: #16B13A;
}
.navbar__slider {
    position: absolute;
    display: block;
    content: " ";
    left: 0;
    bottom: 0;
    height: 3px;
    background-color: #16B13A;
    transition: transform .3s;
}
.navbar__title{
    display: inline-block;
    font-size: 15px;
    max-width: 8em;
    text-align: center;
}
swiper {
  height: 100%;
}
swiper-item{
  width: 100%;
  padding-top: 20rpx;
  text-align: center;
}

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

var tabs = [
  {
    name: "热门视频"
  },
  {
    name: "比赛集锦"
  },
  {
    name: "你懂专栏"
  },
  {
    name: "天下足球"
  }
];
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs: tabs,     //展示的数据
    slideOffset: 0,//指示器每次移动的距离
    activeIndex: 0,//当前展示的Tab项索引
    sliderWidth: 96,//指示器的宽度,计算得到
    contentHeight: 0//页面除去头部Tabbar后，内容区的总高度，计算得到
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
        //计算相关宽度
          sliderWidth: res.windowWidth / that.data.tabs.length,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex,
          contentHeight: res.windowHeight - res.windowWidth / 750 * 68//计算内容区高度，rpx -> px计算
        });
      }
    });
  },
  bindChange: function (e) {
    var current = e.detail.current;
    this.setData({
      activeIndex: current,
      sliderOffset: this.data.sliderWidth * current
    });
    console.log("bindChange:" + current);
  },
  navTabClick: function (e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
    console.log("navTabClick:" + e.currentTarget.id);
  }
})

总结

上面的布局代码和js代码其实写起来都不难，关键在于css样式的编写，对于不熟悉CSS的人来说调样式太痛苦了。这个效果也是我调了好半天，参考了好多代码之后写出来的，真o(╯□╰)o，看来想写好小程序还得好好学学CSS样式。

原创文章，本文采用知识共享署名 2.5(中国大陆许可协议)进行许可，欢迎转载，但转载请注明来自ittiger.cn，并保证转载后文章内容的完整性。本人(laohu)保留所有版权相关权利。

最近在学习微信小程序，尝试着写了一个足球视频播放的小程序，先放效果截图吧

通过这个小程序的练习熟悉小程序中网络加载，页面编写和配置，页面跳转及传参，页面展示时的数据绑定以及独立模块的引用等知识点。

当然写小程序最重要的一点是必须要熟悉CSS样式的编写，对于我这种对CSS不熟的人来说真是太困难了。一个界面效果都需要调上半天。

项目代码地址如下：
https://github.com/huyongli/WXSoccerVideo

原创文章，本文采用知识共享署名 2.5(中国大陆许可协议)进行许可，欢迎转载，但转载请注明来自ittiger.cn，并保证转载后文章内容的完整性。本人(laohu)保留所有版权相关权利。

TextSwitcher和ViewSwitcher是什么，有什么用呢？

其实大家从名字就可以看出来其大概意思，TextSwitcher是用来切换文本显示的，而ViewSwitcher是用来切换视图显示的，实际上他们也的确是用来做这个的，只不过他们在切换视图显示的时候允许添加切换的动画效果。TextSwitcher其实也是ViewSwitcher的子类实现。

TextSwitcher使用

我们先来看看TextSwitcher的用法：

关键布局代码如下：

1
2
3
4
5
6
7
8
9

<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="change"/>
<TextSwitcher
        android:id="@+id/switcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

Java代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//设置显示Text文本的View创建工厂
//这是通过代码的方式创建显示文本的视图，也可以直接在布局中设置显示文本的视图，这个在讲ViewSwitcher的用法的时候再说
mTextSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
     @Override
     public View makeView() {
         TextView t = new TextView(TextSwitcherActivity.this);
         t.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL);
         t.setTextAppearance(TextSwitcherActivity.this, android.R.style.TextAppearance_Large);
         return t;
     }
 });
 Animation in = AnimationUtils.loadAnimation(this,
         android.R.anim.fade_in);
 Animation out = AnimationUtils.loadAnimation(this,
         android.R.anim.fade_out);
 mTextSwitcher.setInAnimation(in);//设置文本出现动画
 mTextSwitcher.setOutAnimation(out);//设置文本消失动画
 mTextSwitcher.setCurrentText(String.valueOf(mCount));//设置初始值，初始值不显示动画
 
 int mCount = 0;
 mButton.setOnClickListener(new View.OnClickListener() {
  @Override
     public void onClick(View v) {
	    mCount++;
		mTextSwitcher.setText(String.valueOf(mCount));//更新文本显示值，会出现动画     
     }
 });

当你点击界面上的按钮的时候，会不断的更新TextSwitcher的显示值，而在更新过程中文本会出现一个淡入淡出的效果，这个效果就是通过动画产生的。

ViewSwitcher使用

接着我们再来看看ViewSwitcher的使用
布局代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="change"/>
<ViewSwitcher
    android:id="@+id/viewSwitcher"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/image1"/>
    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/image2"/>
</ViewSwitcher>

上面的布局中我们给ViewSwitcher添加了两个子视图，注意这里只能添加两个直接子视图，否则初始化会出现异常，至于原因后面接着说。前面说过TextSwitcher也可以通过布局设置文本显示视图，它的设置方式与ViewSwitcher其实也是一样的。

ok，接着上Java代码

1
2
3
4
5
6
7
8
9
10
11
12
13

//因为我们已经通过布局的方式设置了要切换的视图，所以就不需要再设置Factory去生成切换视图了
Animation slide_in_left = AnimationUtils.loadAnimation(this,
                android.R.anim.slide_in_left);
Animation slide_out_right = AnimationUtils.loadAnimation(this,
       android.R.anim.slide_out_right);
mViewSwitcher.setInAnimation(slide_in_left);//设置图片出现动画
mViewSwitcher.setOutAnimation(slide_out_right);//设置图片消失动画
mButton2.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
		mViewSwitcher.showNext();     
	}
});

上面就是ViewSwitcher的使用方式，其实用起来还是很简单的。通过自定义动画，我们可以为两个View切换时添加更多漂亮有趣的动画效果

使用场景

在Android开发中视图切换显示还是很常见的，比如应用加载数据时显示加载动画视图数据视图隐藏，而加载成功后加载动画视图隐藏数据视图显示，这个场景使用ViewSwitcher来实现应该会更简单，更方便。

源码探究

• 前面说到过ViewSwitcher只能存在两个直接子视图，否则会初始化失败，这是为什么呢？通过源码我们可以找到答案

1
2
3
4
5
6
7

@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
   if (getChildCount() >= 2) {
       throw new IllegalStateException("Can't add more than 2 views to a ViewSwitcher");
   }
   super.addView(child, index, params);
}

• 在前面ViewSwitcher的使用中我们点击按钮的时候直接调用了mViewSwitcher.showNext();，既然只能有两个子视图，那我们每次点击都showNext()怎么会没出现越界异常呢？ok，我们还是看看源码中是怎么实现的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@android.view.RemotableViewMethod
public void showNext() {
   setDisplayedChild(mWhichChild + 1);
}
@android.view.RemotableViewMethod
public void setDisplayedChild(int whichChild) {
    mWhichChild = whichChild;
    if (whichChild >= getChildCount()) {
        mWhichChild = 0;
    } else if (whichChild < 0) {
        mWhichChild = getChildCount() - 1;
    }
    boolean hasFocus = getFocusedChild() != null;
    // This will clear old focus if we had it
    showOnly(mWhichChild);
    if (hasFocus) {
        // Try to retake focus if we had it
        requestFocus(FOCUS_FORWARD);
    }
}

通过上面的实现我们可以看到当其显示的child索引出现越界之后，会自动的进行循环显示，这也是为什么一直调用showNext()没出现越界异常的原因

切换原理

我们再来看看其切换显示过程中视图的显示和隐藏及动画是如何实现的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

void showOnly(int childIndex, boolean animate) {
    final int count = getChildCount();
    for (int i = 0; i < count; i++) {
        final View child = getChildAt(i);
        if (i == childIndex) {
            if (animate && mInAnimation != null) {
                child.startAnimation(mInAnimation);
            }
            child.setVisibility(View.VISIBLE);
            mFirstTime = false;
        } else {
            if (animate && mOutAnimation != null && child.getVisibility() == View.VISIBLE) {
                child.startAnimation(mOutAnimation);
            } else if (child.getAnimation() == mInAnimation)
                child.clearAnimation();
            child.setVisibility(View.GONE);
        }
    }
}

上面的代码实现也很简单，当显示指定索引的child时，将其设置为可见并执行mInAnimation，其他视图在设置为不可见并执行mOutAnimation动画

Factory作用原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public void setFactory(ViewFactory factory) {
    mFactory = factory;
    obtainView();
    obtainView();
}
private View obtainView() {
    View child = mFactory.makeView();
    LayoutParams lp = (LayoutParams) child.getLayoutParams();
    if (lp == null) {
        lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
    }
    addView(child, lp);
    return child;
}

通过源码实现我们可以知道mTextSwitcher.setFactory(mFactory)设置完成之后，ViewSwitcher会立刻生成两个视图作为其子视图作为切换显示用。

示例代码在这里：https://github.com/huyongli/AndroidDemo

原创文章，本文采用知识共享署名 2.5(中国大陆许可协议)进行许可，欢迎转载，但转载请注明来自ittiger.cn，并保证转载后文章内容的完整性。本人(laohu)保留所有版权相关权利。

今天说的这个主题与媒体播放有关，尤其是音乐播放，说到音乐播放大家应该都用过音乐App。
通常一个音乐App的实现主要涉及如下几点：

1. 从服务器获取音乐数据
2. 播放音乐时播放器的各种播放状态以及不同状态下的UI展示
3. 播放过程中通过UI界面控制播放器的各种状态
4. UI控制如何与播放服务进行关联并进行状态同步
5. 如何保证后台播放过程中播放服务不被杀死

对于上面的这几点，其实Android已经为我们提供了一套完整的解决方案，它已经很好的将这些操作进行了封装，我们只需要关注数据的获取和歌曲的播放即可。Android提供的这套API在support-v4中提供了兼容版本，因此在使用的过程中最好使用该版本以兼容低版本系统。

关键类主要有如下几个：

1. MediaBrowserServiceCompat 媒体浏览器服务
2. MediaBrowserCompat 媒体浏览器
3. MediaControllerCompat 媒体控制器
4. MediaSessionCompat 媒体会话
   我们一个个来说。

查看更多

老规矩，还是先上效果图

github地址

查看更多

多说无益，先上效果图img\material-design

这个效果其实是和SegmentFault的首页效果是一样的。

Demo github地址戳这里

来由

查看更多

Behavior是Android Design包中出现的一个概念，Android Design包中很多控件的动画效果都是使用Behavior实现的，所以想要更好的实现Material Design风格的应用就有必要弄清楚Behavior。这篇文章从简单开始，介绍如何自定义Behavior以实现快速返回的效果。

还是先看下最终实现的效果

查看更多

前言

在使用App过程中，经常会有使用到联系人或城市列表的场景，其实这两种效果是一样的，都是右边有个索引列表，点击索引列表可跳转到指定字母开头的联系人或城市上去，同时向上滑动过程中头部会有个显示当前联系人首字母的界面固定不动。下面我以微信通讯录的效果作为例子，介绍我是如何实现一个这样效果自定义View的思路和过程。

实现效果

下面是我实现的最终效果图(GIF录制的不太好)，想看源代码的同学戳这里https://github.com/huyongli/IndexStickyView

查看更多

本文内容来自Android官网对Android开发过程中资源使用、资源适配、资源选择原理的介绍和建议。

查看更多