一、项目介绍:
框架:ViewPager+GridView
一、左右滑动页面可以实现“功能介绍”“外观及功能简介”“安全事项”三个分页面的自由切换;
二、点击“功能介绍”“外观及功能简介”“安全事项”三个标题栏按钮可实现对应界面的切换,选中变换按钮布局背景;
三、左右滑动切换页面时,可以动态改变对应页面的标题背景,选择为蓝色,否则为灰色;
四、主页面滚动条隐藏、分页面滚动条为蓝色;
五、设置默认选择标题为功能介绍;
六、设置快捷启动GPS、蓝牙电话按钮,点击变换背景;
七、“功能介绍”页面放置4x3可滚动网格布局按钮图标;
八、点击“功能介绍”页面中的不同图标按钮,可以打开对应的页面,点击图标按钮变换背景;
九、隐藏页面滑动到边缘会出现的蓝色阴影;
十、除”功能介绍“外,共14个功能详解页面,页面可以上下滚动;
十一、程序右侧放置可控制所有页面滚动的按钮,按钮可以分向上/向下控制当前页面,滚动按钮点击变换颜色;
十二、进入页面默认向上滚动按钮为灰色,且不能点击;
十三、当页面离开顶端的时候,向上滚动按钮变色为可点击的白色;
十四、当页面滑动到底部时候,向下滚动按钮变色为灰色不可点击;
十五、当跳转/滑动至单屏页面时,右侧滚动按钮布局隐藏,否则显示;
十六、当通过主页点击按钮进入对应界面时,功能介绍标题栏会切换为当前打开页面标题,返回时,恢复功能介绍标题;
4月11日修改:
操作项目的三个问题:
#、viewpager的每个页面滑动切换回来,页面会显示是上次滑动的位置;怎么让页面滑动的时候都是显示在顶端?
scrollTo(0, 0);
#、gridview是viewpager的一个页面,gridview的每个item放的是一个scollview页面,当打开第一个scollview页面滑动动后,返回再打开第二个scollview页面会发现这个页 面显示位置跟第一个页面返回前停留的位置一样!怎么让每次打开页面的时候,都显示在顶端?
scrollTo(0, 0);
#、gridview和scollview页面首次打开时,不动的话不能获取不到页面的高度值,怎么才能静态获取?
给页面设置了scrollTo(0, 0);后
发现每次打开新srollview页面都会执行ScrollView.getY();方法:且值为0,那么剩下的事就简单了!
项目中的各种冲突问题是Gridview引起的!
二、Mainactivity:
package com.jbd.readactivity;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.mcucom.McuComAddr;
import android.mcucom.McuComKey;
import android.mcucom.McuComManager;
import android.mcucom.McuComSysState;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.GridView;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
@SuppressLint("ResourceAsColor")
public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener,ScrollViewListener{
private ViewPager viewPager;
private ViewPagerAdapter vpAdapter;
private ArrayList<View> views;
private View view1, view2, view3;
private Button[] points;
private int currentIndex;
private Button button_up, button_down,a1;
private Button button_update;
private ObservableScrollView includeView2,slView_page2;
private MyGridViewAdapter adapter = null;
private GridView gridView;
private RelativeLayout dh;
private int type=0;
private List<String> iconName = new ArrayList<String>();
private int[] image = { R.drawable.item_home, R.drawable.item_gps, R.drawable.item_bule,
R.drawable.item_radio, R.drawable.item_music, R.drawable.item_void,R.drawable.item_photo,
R.drawable.item_dvr, R.drawable.item_phone,
// R.drawable.item_av,
R.drawable.item_close, R.drawable.item_made };
private int[] pager = { R.layout.page1, R.layout.page2, R.layout.page3,
R.layout.page4, R.layout.page5, R.layout.page6, R.layout.page7,
R.layout.page8, R.layout.page9,
// R.layout.page10,
R.layout.page11,R.layout.page12 };
@SuppressLint("UseSparseArrays")
private Map<Integer, Integer> mapDetail = new HashMap<Integer, Integer>();
@SuppressLint("UseSparseArrays")
private Map<Integer, String> icon_list = new HashMap<Integer, String>();
private List<Map<Integer, String>> data_list;
private ImageButton location_place,phone_bluetooth;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.homeactivity);
this.XML();
initView();
initData();
setButton();
}
private void XML() {
String home = getResources().getString(R.string.home);
iconName.add(home);
String gps = getResources().getString(R.string.gps);
iconName.add(gps);
String bule = getResources().getString(R.string.bule);
iconName.add(bule);
String radio = getResources().getString(R.string.radio);
iconName.add(radio);
String music = getResources().getString(R.string.music);
iconName.add(music);
String myvoid = getResources().getString(R.string.myvoid);
iconName.add(myvoid);
String photo = getResources().getString(R.string.photo);
iconName.add(photo);
String dvr = getResources().getString(R.string.dvr);
iconName.add(dvr);
String phone = getResources().getString(R.string.phone);
iconName.add(phone);
// String av = getResources().getString(R.string.av);
// iconName.add(av);
String close = getResources().getString(R.string.close);
iconName.add(close);
String made = getResources().getString(R.string.made);
iconName.add(made);
}
private void initView() {
phone_bluetooth = (ImageButton) findViewById(R.id.phone_bluetooth);
location_place = (ImageButton) findViewById(R.id.location_place);
a1=(Button) findViewById(R.id.a1);
dh=(RelativeLayout) findViewById(R.id.dh);
LayoutInflater mLi = LayoutInflater.from(this);
view1 = mLi.inflate(R.layout.home_page2, null);
view2 = mLi.inflate(R.layout.home_page3, null);
view2.setOverScrollMode(View.OVER_SCROLL_NEVER);
view3 = mLi.inflate(R.layout.home_page1, null);
view3.setOverScrollMode(View.OVER_SCROLL_NEVER);
button_up = (Button) findViewById(R.id.up1);
button_down = (Button) findViewById(R.id.down1);
button_update = (Button) findViewById(R.id.button_update);
// includeView1=(ObservableScrollView) view1.findViewById(R.id.include1);
// includeView1.setScrollViewListener( (ScrollViewListener) this);
includeView2 =(ObservableScrollView) view3.findViewById(R.id.include2);
includeView2.setOverScrollMode(View.OVER_SCROLL_NEVER) ;
includeView2.setScrollViewListener( (ScrollViewListener) this);
slView_page2=(ObservableScrollView) view1.findViewById(R.id.slview_page2);
slView_page2.setOverScrollMode(View.OVER_SCROLL_NEVER) ;
slView_page2.setScrollViewListener( (ScrollViewListener) this);
viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setOverScrollMode(View.OVER_SCROLL_NEVER);
views = new ArrayList<View>();
vpAdapter = new ViewPagerAdapter(views);
viewPager.setOnPageChangeListener(this);
viewPager.setOffscreenPageLimit(0);
}
private void initData() {
button_down.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(true){
if(type==1){
includeView2.smoothScrollBy(1000, 470);
}else{
gridView.smoothScrollBy(300, 1000);
slView_page2.smoothScrollBy(300, 1000);
}
}
}
});
button_up.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(true){
if(type==1){
includeView2.smoothScrollBy(1000, -470);
}else{
gridView.smoothScrollBy(-300, 1000);
slView_page2.smoothScrollBy(1000, -470);
}
}
}
});
location_place.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(true){
OpenGpsBtUtil.openGPS();
}
}
});
phone_bluetooth.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(true){
OpenGpsBtUtil.openBT();
}
}
});
views.add(view1);
views.add(view2);
views.add(view3);
initPoint(views.size());
gridView = (GridView) view3.findViewById(R.id.girdview);
gridView.setOnScrollListener(new GridViewScrollListener());
gridView.setOverScrollMode(View.OVER_SCROLL_NEVER) ;
getData();
adapter = new MyGridViewAdapter();
gridView.setAdapter(adapter);
viewPager.setAdapter(vpAdapter);
for (int i = 0; i < image.length; i++) {
mapDetail.put(image[i], pager[i]);
}
for (int i = 0; i < iconName.size(); i++) {
icon_list.put(image[i], iconName.get(i));
}
}
//gridview变换按钮图标
private class GridViewScrollListener implements OnScrollListener{
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {}
@Override
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
// Log.i("TAG","firstVisibleItem===="+firstVisibleItem+";visibleItemCount=="+visibleItemCount+";totalItemCount=="+totalItemCount);
if (firstVisibleItem==0) {
View view2 = gridView.getChildAt(firstVisibleItem);
if (view2!=null) {//
// Log.i("TAG","view2.getY()========="+view2.getY());
if (view2.getY() == 8) {//在顶部
button_up.setBackgroundResource(R.drawable.upb);//向上的键为灰色
button_up.setClickable(false);//且不能按
} else {
button_up.setBackgroundResource(R.drawable.upg);//向上的键为白色
button_up.setClickable(true);//能按
}
}
}else {
button_up.setBackgroundResource(R.drawable.upg);//向上的键为白色
button_up.setClickable(true);//能按
}
if ((firstVisibleItem+visibleItemCount)==totalItemCount) {
View view_3 = gridView.getChildAt(totalItemCount-1-firstVisibleItem);//scrollview所占的高度
if (view_3!=null) {
// Log.i("TAG","view3.getY()============"+view3.getY());
if (view_3.getY() == 246) {//在底部
button_down.setBackgroundResource(R.drawable.downb); //向下的键为灰色
button_down.setClickable(false); //且不能按
} else {
button_down.setBackgroundResource(R.drawable.downg); //向下的键为白色
button_down.setClickable(true); //能按
}
view_3=null;
}
}else{//在中部
button_down.setBackgroundResource(R.drawable.downg); //向下的键为白色
button_down.setClickable(true); //能按
}
}
}
@SuppressLint("UseSparseArrays")
private void getData() {
data_list = new ArrayList<Map<Integer, String>>();
for (int i = 0; i < image.length; i++) {
Map<Integer, String> map = new HashMap<Integer, String>();
map.put(image[i], iconName.get(i));
data_list.add(map);
}
}
private void initPoint(int views) {
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.point);
points = new Button[views];
for (int i = 0; i < views; i++) {
points[i] = (Button) linearLayout.getChildAt(i);
points[i].setEnabled(true);
points[i].setOnClickListener(this);
points[i].setTag(i);
}
currentIndex = 0;
points[currentIndex].setEnabled(false);
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
public static class OpenGpsBtUtil {
private static McuComManager gMCM = new McuComManager();
private static int g_sys_state = 0;
private static void MainmenuChangeSystem(int sysstate) {
if (null != gMCM) {
g_sys_state = gMCM.getSystemState();
gMCM.getSysDevFlag();
switch (sysstate) {
case McuComSysState.CAR_MPEG_SYS_BT:
if (g_sys_state != sysstate) {
byte[] data = McuComKey.getKeyData(
McuComKey.CAR_KEY_ATTR_TOUCH, McuComKey.SHORTKEY,
McuComKey.CAR_KEY_BT_SEL);
send_command(McuComAddr.CAR_MPEG_KEY_ADR, data);
} else {
gMCM.directinSystemState(sysstate);
}
break;
case McuComSysState.CAR_MPEG_SYS_GPS:
byte[] data = McuComKey.getKeyData(
McuComKey.CAR_KEY_ATTR_TOUCH, McuComKey.SHORTKEY,
McuComKey.CAR_KEY_GPS_VIDEO_SEL);
send_command(McuComAddr.CAR_MPEG_KEY_ADR, data);
break;
}
}
}
private static void send_command(int addr, byte[] data) {
if (null != gMCM){
gMCM.sendMcuComMultiData(addr, data);
}else{
gMCM = new McuComManager();
send_command(addr, data);
}
}
public static void openGPS(){
MainmenuChangeSystem(McuComSysState.CAR_MPEG_SYS_GPS);
}
public static void openBT(){
MainmenuChangeSystem(McuComSysState.CAR_MPEG_SYS_BT);
}
}
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
Log.i("TAG", "position========page======="+position);
button_up.setVisibility(View.VISIBLE);
button_down.setVisibility(View.VISIBLE);
a1.setVisibility(View.VISIBLE);
if(type==1){
type=2;
}
setButton();
break;
case 1:
Log.i("TAG", "position========page======="+position);
button_up.setVisibility(View.GONE);
button_down.setVisibility(View.GONE);
a1.setVisibility(View.GONE);
if(type==1){
type=2;
}
break;
case 2:
Log.i("TAG", "position========page======="+position);
button_up.setVisibility(View.VISIBLE);
button_down.setVisibility(View.VISIBLE);
a1.setVisibility(View.VISIBLE);
gridView.setVisibility(View.VISIBLE);
if(type==2){
type=1;
}
break;
}
setCurDot(position);
setButton();
}
@Override
public void onClick(View v) {
int position = (Integer) v.getTag();
setCurView(position);
setCurDot(position);
}
private void setCurView(int position) {
if (position < 0 || position >= 4) {
return;
}
viewPager.setCurrentItem(position);
setButton();
}
private void setCurDot(int positon) {
if (positon < 0 || positon > 3 || currentIndex == positon) {
return;
}
points[positon].setEnabled(false);
points[currentIndex].setEnabled(true);
currentIndex = positon;
}
public class ViewPagerAdapter extends PagerAdapter {
private ArrayList<View> views;
public ViewPagerAdapter (ArrayList<View> views){
this.views = views;
}
@Override
public void notifyDataSetChanged() {
super.notifyDataSetChanged();
}
@Override
public int getCount() {
if (views != null) {
return views.size();
}
return 0;
}
@Override
public Object instantiateItem(View view, int position) {
((ViewPager) view).addView(views.get(position), 0);
return views.get(position);
}
@Override
public boolean isViewFromObject(View view, Object arg1) {
return (view == arg1);
}
@Override
public void destroyItem(View view, int position, Object arg2) {
((ViewPager) view).removeView(views.get(position));
}
}
private class MyGridViewAdapter extends BaseAdapter {
ViewHolder holder = null;
@Override
public int getCount() {
return data_list.size();
}
@Override
public Object getItem(int position) {
return data_list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View convertView,
ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(MainActivity.this).inflate(
R.layout.home_page1_home_item, null);
holder = new ViewHolder();
holder.textView = (TextView) convertView.findViewById(R.id.name_grid);
holder.button = (Button) convertView.findViewById(R.id.button_grid);
holder.layout = (RelativeLayout) convertView.findViewById(R.id.item_background);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
Map<Integer, String> map = data_list.get(position);
Set<Integer> key = map.keySet();
for (Integer integer : key) {
holder.button.setBackgroundResource(integer);
holder.textView.setText(map.get(integer));
}
holder.layout.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Map<Integer, String> map = data_list.get(position);
Log.i("TAG", "position====onClick===="+position);
switch (position) {
case 3:
button_up.setVisibility(View.GONE);
button_down.setVisibility(View.GONE);
a1.setVisibility(View.GONE);
break;
case 4:
button_up.setVisibility(View.GONE);
button_down.setVisibility(View.GONE);
a1.setVisibility(View.GONE);
break;
case 5:
button_up.setVisibility(View.GONE);
button_down.setVisibility(View.GONE);
a1.setVisibility(View.GONE);
break;
case 6:
button_up.setVisibility(View.GONE);
button_down.setVisibility(View.GONE);
a1.setVisibility(View.GONE);
break;
case 7:
button_up.setVisibility(View.GONE);
button_down.setVisibility(View.GONE);
a1.setVisibility(View.GONE);
break;
case 9:
button_up.setVisibility(View.GONE);
button_down.setVisibility(View.GONE);
a1.setVisibility(View.GONE);
break;
default:
setButton();
break;
}
Set<Integer> key = map.keySet();
for (Integer integer : key) {
int pagerIndex = mapDetail.get(integer);
exChangeImager(icon_list.get(integer));
exChangePager(pagerIndex,integer);
}
}
});
return convertView;
}
private class ViewHolder {
TextView textView;
Button button;
RelativeLayout layout;
}
}
protected void exChangeImager(String iconName) {
button_update.setText(iconName);
button_update.setEnabled(false);
}
private void exChangePager(int index,int key) {
Log.i("TAG", "index=========="+index);
View view = LayoutInflater.from(MainActivity.this).inflate(index, null);
includeView2.removeAllViews();
includeView2.addView(view);
setButton();
includeView2.setVisibility(View.VISIBLE);
type=1;
gridView.setVisibility(View.GONE);
}
private void setButton(){
if (slView_page2 != null) {
if (includeView2.getY() <= 0 || slView_page2.getY() <= 0) {
Log.i("TAG", "slView_page2.getY()=="+slView_page2.getY());
includeView2.scrollTo(0, 1);
slView_page2.smoothScrollTo(0, 1);
button_up.setBackgroundResource(R.drawable.upb);
button_down.setBackgroundResource(R.drawable.downg);
}
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
if(type==1){
includeView2.setVisibility(View.GONE);
gridView.setVisibility(View.VISIBLE);
button_up.setVisibility(View.VISIBLE);
button_down.setVisibility(View.VISIBLE);
a1.setVisibility(View.VISIBLE);
dh.setVisibility(View.VISIBLE);
button_update.setText(R.string.sub);
type=2;
}else{
finish();
}
return true;
}
return super.onKeyDown(keyCode, event);
}
public void onScrollChanged(ObservableScrollView observableScrollView,
int x, int y, int oldx, int oldy) {
int scrollY=observableScrollView.getScrollY();//顶端以及滑出去的距离
int height=observableScrollView.getHeight();//界面的高度
int scrollViewMeasuredHeight=observableScrollView.getChildAt(0).getMeasuredHeight();//scrollview所占的高度
Log.i("TAG", "scrollY======"+scrollY+";height====="+height+";scrollViewMeasuredHeight==="+scrollViewMeasuredHeight);
if(scrollY==0){//在顶端的时候
button_up.setBackgroundResource(R.drawable.upb);//向上的键为灰色
button_up.setClickable(false);//且不能按
}else if((scrollY+height)==scrollViewMeasuredHeight){//当在底部的时候
button_down.setBackgroundResource(R.drawable.downb); //向下的键为灰色
button_down.setClickable(false); //且不能按
}else {//当在中间的时候
button_down.setBackgroundResource(R.drawable.button_down);//向下的键恢复点击变色状态
button_down.setClickable(true); //可点击
button_up.setClickable(true);//可点击
button_up.setBackgroundResource(R.drawable.button_up); //向上的键恢复可点击变色
}
}
}
ScrollViewListener:
package com.jbd.readactivity;
public interface ScrollViewListener {
void onScrollChanged(ObservableScrollView observableScrollView, int x,
int y, int oldx, int oldy);
}
布局:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/background"
>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/line"
android:layout_marginLeft="85px"
android:layout_toLeftOf="@+id/dh" />
<LinearLayout
android:id="@+id/left_select"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="55dp"
android:background="@drawable/keyboard"
android:layout_gravity="left"
android:orientation="vertical" >
<ImageButton
android:id="@+id/location_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/gps_faster"
android:background="@android:color/transparent"
android:layout_marginLeft="3dp"
android:layout_marginTop="19dp"/>
<ImageButton
android:id="@+id/phone_bluetooth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/phone_faster"
android:background="@android:color/transparent"
android:layout_marginLeft="3dp"
android:layout_marginTop="24dp"/>
</LinearLayout>
<LinearLayout
android:id="@+id/point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="68dip"
android:paddingRight="30dip"
android:paddingTop="11px" >
<Button
android:id="@+id/button_update"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_home_2"
android:clickable="true"
android:text="@string/sub"
android:textColor="@android:color/white"
android:textSize="18sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_home_2"
android:text="@string/sub1"
android:textColor="@android:color/white"
android:textSize="18sp"
android:clickable="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_home_3"
android:clickable="true"
android:text="@string/safe"
android:textColor="@android:color/white"
android:textSize="18sp"
/>
</LinearLayout>
<View
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_alignParentLeft="true"
android:layout_below="@+id/point"
android:layout_marginLeft="68dp"
android:background="@drawable/line1" />
<RelativeLayout
android:id="@+id/dh"
android:layout_width="85px"
android:layout_height="435px"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_below="@+id/line"
android:layout_marginTop="3.5dp"
android:layout_marginLeft="4.5dp"
android:visibility="visible"
android:orientation="vertical" >
<ImageButton
android:id="@+id/up1"
android:layout_width="70px"
android:layout_height="85px"
android:background="@drawable/button_up"
android:clickable="true"
/>
<ImageButton
android:id="@+id/down1"
android:layout_width="70px"
android:layout_height="85px"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/button_down"
android:clickable="true"
/>
<ImageView
android:id="@+id/a1"
android:layout_width="57px"
android:layout_height="190dp"
android:layout_marginLeft="4.5dp"
android:layout_centerVertical="true"
android:background="@drawable/dh" />
</RelativeLayout>
</RelativeLayout>