bus应用的实现

   一：源码工程

   二：需求

  实现公交app查看站点的效果,车过了的站点是蓝色的，车到的当前站点是红色，车未到的站点是灰色的，站点超过一屏幕可以滑动，有一个按钮，点击可以模拟站点的刷新。

          

   三：思路

         1. 可以加载多个站点，并且超过一屏幕可以滑动，得集成横向滑动组件HorizontalScrollView，命名TitleBusBarScoller,它里边有个当前站点下标变量,可以刷新站点。

         2. 横向滑动组件里有两个LinearLayout子组件，第一个LinearLayout组件用来放车,它根据站点的位置动态摆放车的位置。第二个LinearLayout循环添加车站的BusItem.

         3. BusItem的站点组件由三部分组件，第一部ImageView,存放站点线;第二个是TextView放站点序列;第三部分是TextView存放站点名。BusItem有三种状态，站点前、站点  后，到站站点。不同状态下三个组件的ui效果是不一样的。

         4.刷新站点其实就是把小车摆放到对应站点的位置,把站点BusItem循环刷新一遍。

   四：关键代码

         1. BusItem: 每个站点对象

 package com.lyg.bus.view;

import android.content.Context;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.lyg.bus.R;




/**
 * @author luyg
 * @function : 滑动块的子组件
 */
public class BusItem {

/**当前站点之前的*/
public static final int STATE_BEFORE = 1;
/**当前站点*/
public static final int STATE_CURRENT = 2;
/**当前站点之后的*/
public static final int STATE_GONE = 3;

private Context context ;
private ImageView iconImageView;
private TextView numTextView ;
private TextView infoTextView ;


public BusItem(Context context){
this.context = context ;
}


public View createChildView(String content , int index , int state){
int width = TitleBusBarScoller.STATION_WIDTH ;
LinearLayout linearLayout = new LinearLayout(context);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(width, 
LinearLayout.LayoutParams.WRAP_CONTENT);
linearLayout.setLayoutParams(layoutParams);
linearLayout.setOrientation(LinearLayout.VERTICAL);

//设置顶部连线按钮
iconImageView = new ImageView(context);
ViewGroup.LayoutParams iconParams = new ViewGroup.LayoutParams(
width, ViewGroup.LayoutParams.WRAP_CONTENT);
iconImageView.setLayoutParams(iconParams);
iconImageView.setImageResource(R.drawable.eboard_line1);


//设置数字按钮
numTextView = new TextView(context);
ViewGroup.LayoutParams numParams = new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
numTextView.setLayoutParams(numParams);
numTextView.setGravity(Gravity.CENTER);
numTextView.setTextColor(context.getResources().getColor(R.color.title_normal));
numTextView.setText(""+index);
numTextView.setTop(10);

//设置内容, 宽要自适应,setEms为1才会出来一行显示一个
int textsize = 12;
infoTextView = new TextView(context);
LinearLayout.LayoutParams infoParams = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//设置单行文字居中,适当
infoParams.setMargins((width-textsize-4)/2, 10, 0, 0);
infoTextView.setEms(1);
infoTextView.setLayoutParams(infoParams);
infoTextView.setTextColor(context.getResources().getColor(R.color.title_normal));
infoTextView.setClickable(true);
infoTextView.setText(content);
infoTextView.setTextSize(textsize);


if (state==STATE_BEFORE) {
iconImageView.setImageResource(R.drawable.eboard_line1);
numTextView.setTextColor(context.getResources().getColor(R.color.title_normal));
infoTextView.setTextColor(context.getResources().getColor(R.color.title_normal));
} else if (state == STATE_CURRENT) {
iconImageView.setImageResource(R.drawable.eboard_line2);
numTextView.setTextColor(context.getResources().getColor(R.color.title_select));
infoTextView.setTextColor(context.getResources().getColor(R.color.title_select));
}else {
iconImageView.setImageResource(R.drawable.eboard_line3);
numTextView.setTextColor(context.getResources().getColor(R.color.title_normal));
infoTextView.setTextColor(context.getResources().getColor(R.color.title_normal));
}

linearLayout.addView(iconImageView);
linearLayout.addView(numTextView);
linearLayout.addView(infoTextView);

return linearLayout;
}


public void updateState(int state){
if (state==STATE_BEFORE) {
iconImageView.setImageResource(R.drawable.eboard_line1);
numTextView.setTextColor(context.getResources().getColor(R.color.title_normal));
infoTextView.setTextColor(context.getResources().getColor(R.color.title_normal));
} else if (state == STATE_CURRENT) {
iconImageView.setImageResource(R.drawable.eboard_line2);
numTextView.setTextColor(context.getResources().getColor(R.color.title_select));
infoTextView.setTextColor(context.getResources().getColor(R.color.title_select));
}else {
iconImageView.setImageResource(R.drawable.eboard_line3);
numTextView.setTextColor(context.getResources().getColor(R.color.title_normal));
infoTextView.setTextColor(context.getResources().getColor(R.color.title_normal));
}
}
}

 2.TitleBusBarScoller： 横向滑动组件

    package com.lyg.bus.view;


import java.util.ArrayList;
import java.util.Random;


import android.content.Context;
import android.util.AttributeSet;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.lyg.bus.R;


public class TitleBusBarScoller extends HorizontalScrollView{


private String[] titles;
private LinearLayout rootLayout ;
private int MarginTop =10;
private int MarginBottom =10;
/**一个站点的宽度*/
public static final int STATION_WIDTH = 150 ;

/**定位车的位置的*/
private LinearLayout busLayout;
/**定位别的信息的*/
private LinearLayout infoLayout;
/**当前的站点*/
private int current ;

private ArrayList<BusItem>dataArrayList = new ArrayList<BusItem>() ;

public TitleBusBarScoller(Context context) {
super(context);
initRootView();
}

public TitleBusBarScoller(Context context, AttributeSet attrs) {
super(context, attrs);
initRootView();
}

public TitleBusBarScoller(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initRootView();
}

private void initRootView(){
rootLayout = new LinearLayout(getContext());
rootLayout.setOrientation(LinearLayout.VERTICAL);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.FILL_PARENT);
params.setMargins(0, MarginTop, 0, MarginBottom);
rootLayout.setLayoutParams(params);

busLayout = new LinearLayout(getContext());
busLayout.setOrientation(LinearLayout.HORIZONTAL);
LinearLayout.LayoutParams busparams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.FILL_PARENT);
params.setMargins(0, MarginTop, 0, MarginBottom);
busLayout.setLayoutParams(busparams);

infoLayout = new LinearLayout(getContext());
infoLayout.setOrientation(LinearLayout.HORIZONTAL);
LinearLayout.LayoutParams infoparams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.FILL_PARENT);
params.setMargins(0, MarginTop, 0, MarginBottom);
infoLayout.setLayoutParams(infoparams);

rootLayout.addView(busLayout);
rootLayout.addView(infoLayout);

this.addView(rootLayout);

}

public void init(String[]titles , int current){
this.titles = titles ;
this.current = current ;
initBus();
initChilderView();
}

/**
* @fucntion : 初始化站点
*/
public void initChilderView(){
for (int i = 0; i < titles.length; i++) {
BusItem item = new BusItem(getContext());
int state = i==current ? BusItem.STATE_CURRENT : i<current? 
BusItem.STATE_BEFORE : BusItem.STATE_GONE ;
infoLayout.addView(item.createChildView(titles[i], i+1 , state));
dataArrayList.add(item);
}
}

/**
* @fucntion : 初始化汽车图标
*/
private void initBus(){
//设置顶部连线按钮
ImageView iconImageView = new ImageView(getContext());
LinearLayout.LayoutParams iconParams = new LinearLayout.LayoutParams(
STATION_WIDTH, LinearLayout.LayoutParams.WRAP_CONTENT);
iconParams.setMargins(0+current*STATION_WIDTH, 20, 0, 5);
iconImageView.setLayoutParams(iconParams);
iconImageView.setImageResource(R.drawable.eboard_bus_normal);
busLayout.addView(iconImageView);
}


private void updataBus(){
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams)busLayout.getChildAt(0).getLayoutParams();
layoutParams.setMargins(0+current*STATION_WIDTH, 20, 0, 5);
busLayout.getChildAt(0).setLayoutParams(layoutParams);

}

private void updataInfo(){
for(int i = 0 ; i<dataArrayList.size() ; i++){
BusItem item = dataArrayList.get(i);
int state = i==current ? BusItem.STATE_CURRENT : i<current? 
BusItem.STATE_BEFORE : BusItem.STATE_GONE ;
item.updateState(state);
}
}


public void update(){
current +=1;
if (current>= dataArrayList.size()) {
current = 0;
}
updataBus();
updataInfo();
}
}