您的位置:首页 > 移动开发 > Android开发

Android学习笔记-ScollView实现QQ消息界面滑动效果

2015-11-28 17:35 513 查看
思路

主界面布局中为ListView填充,然后创建layout.xml以及自定义适配器填充数据,xml文件中的root为HorizontalScrollView.并且分为左右两个LinearLayout,默认显示左边,实现滑动效果。

效果图:



MainAcitivity:package com.edu.pro1125_qq_listview_scoll;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import com.edu.adapter.MyAdapter;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;

/**
* 获取需要填充的数据
* 自定义适配器
* @author xukai
* 2015年11月28日
*
*/
public class MainActivity extends Activity {

private ListView lv;
private List<HashMap<String, Object>> list;
private MyAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

lv = (ListView) findViewById(R.id.main_lv);
list = new ArrayList<>();//自己添加数据
HashMap<String, Object> map = new HashMap<>();
map.put("image", R.drawable.ic_launcher);
map.put("name", "好友1");
map.put("message", "晚上一起吃饭");
list.add(map);
map = new HashMap<>();
map.put("image", R.drawable.ic_launcher);
map.put("name", "好友2");
map.put("message", "明天一起上班");
list.add(map);
map = new HashMap<>();
map.put("image", R.drawable.ic_launcher);
map.put("name", "好友3");
map.put("message", "明天一起上班");
list.add(map);
map = new HashMap<>();
map.put("image", R.drawable.ic_launcher);
map.put("name", "好友4");
map.put("message", "明天一起上班");
list.add(map);
//获取当前屏幕信息
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
adapter = new MyAdapter(list, MainActivity.this, dm);//自定义适配器
lv.setAdapter(adapter);

}

}
主界面就是一个ListView
<ListView
android:id="@+id/main_lv"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>

用来填充的xml文件:lv_layout.xml:

注意消除滚动条android:scrollbars="none"
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/hsv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none" >

<LinearLayout
android:id="@+id/lv_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal" >

<LinearLayout
android:id="@+id/lv_layout_0"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<ImageView
android:id="@+id/lv_layout_image"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/ic_launcher" >
</ImageView>
</LinearLayout>

<LinearLayout
android:id="@+id/lv_layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >

<TextView
android:id="@+id/lv_layout_tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="姓名" />

<TextView
android:id="@+id/lv_layout_tv_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="信息" />
</LinearLayout>

<LinearLayout
android:id="@+id/lv_layout_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<Button
android:id="@+id/lv_layout_2_btn_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/befirst" />

<Button
android:id="@+id/lv_layout_2_btn_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/delete" />
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>

自定义的适配器:
1.实现了View.OnClickListener,View.OnTouchListener接口

2.继承BaseAdapter类

3.内部定义了一个ViewHolder类

package com.edu.adapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import android.content.Context;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.edu.pro1125_qq_listview_scoll.R;

/**
* 自定义的适配器
* @author xukai
* 2015年11月27日
*
*/
public class MyAdapter extends BaseAdapter implements View.OnClickListener,View.OnTouchListener {

private List<HashMap<String, Object>> list; //数据
private Context context;
private DisplayMetrics dm; //用于获取屏幕大小
private View beforeView;
private List<ViewHolder> holders = new ArrayList<>();

public MyAdapter(List<HashMap<String, Object>> list,
Context context,
DisplayMetrics dm) {
this.list = list;
this.context = context;
this.dm = dm;
}

@Override
public int getCount() {
return list.size();
}

@Override
public Object getItem(int position) {
return list.get(position);
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if(convertView == null){
LayoutInflater inflater = LayoutInflater.from(context);
convertView = inflater.inflate(R.layout.lv_layout, null);
holder = new ViewHolder();
//绑定布局组件
holder.hsv = (HorizontalScrollView) convertView.findViewById(R.id.hsv);
holder.linearLayout = (LinearLayout) convertView.findViewById(R.id.lv_layout_1);
holder.btnLayout = (LinearLayout) convertView.findViewById(R.id.lv_layout_2);
holder.image = (ImageView) convertView.findViewById(R.id.lv_layout_image);
holder.tvName = (TextView) convertView.findViewById(R.id.lv_layout_tv_name);
holder.tvMessage = (TextView) convertView.findViewById(R.id.lv_layout_tv_message);

//标记按钮
holder.btnFirst = (Button) convertView.findViewById(R.id.lv_layout_2_btn_first);
holder.btnFirst.setTag(position);
holder.btnDelete = (Button) convertView.findViewById(R.id.lv_layout_2_btn_delete);
holder.btnDelete.setTag(position);
//设置标签
convertView.setTag(holder);
}else{
//读取标签
holder = (ViewHolder) convertView.getTag();
}
//记录所有的holder
holders.add(holder);
HashMap<String, Object> map = list.get(position);
//设置左边的LinearLayout宽度为屏幕宽度
LayoutParams params = holder.linearLayout.getLayoutParams();
params.width = dm.widthPixels;
//给每一项添加监听器
holder.hsv.setOnTouchListener(this);
holder.btnDelete.setOnClickListener(this);
holder.btnFirst.setOnClickListener(this);

holder.image.setImageDrawable(context.getResources()
.getDrawable(Integer.parseInt(map.get("image")+"")));
holder.tvName.setText(map.get("name")+"");
holder.tvMessage.setText(map.get("message")+"");
return convertView;
}

/**
* 需要的控件
*/
class ViewHolder{
HorizontalScrollView hsv;
LinearLayout linearLayout;
LinearLayout btnLayout;
ImageView image;
TextView tvName;
TextView tvMessage;
Button btnFirst;
Button btnDelete;
}

/**
* 监听按钮
*/
@Override
public void onClick(View v) {
int position = (int) v.getTag();
switch (v.getId()) {
case R.id.lv_layout_2_btn_first:
HashMap<String,Object> map = null;
map = list.get(position);
list.remove(position);
list.add(0, map);
break;
case R.id.lv_layout_2_btn_delete:
list.remove(position);
break;
}
notifyDataSetChanged();
//还原所有
ViewHolder holder = holders.get(position);
holder.hsv.smoothScrollTo(0, 0);
}

/**
* 监听列表每项
*/
@Override
public boolean onTouch(View v, MotionEvent event) {
float down = 0;//按下坐标
float up = 0;//抬起坐标
ViewHolder holder = (ViewHolder) v.getTag();
switch (event.getAction()) {
//按下动作
case MotionEvent.ACTION_DOWN:
down = event.getX();
if(beforeView != null){
//将上一次操作的滚动条恢复原样
ViewHolder beforeHolder = (ViewHolder)beforeView.getTag();
beforeHolder.hsv.smoothScrollTo(0, 0);
}
//这是一次测试
break;
//抬起动作
case MotionEvent.ACTION_UP:
//记录此次操作
beforeView = v;
up = event.getX();
if(down == up){
// 手势未移动,即点击
}else{
int scrol = holder.hsv.getScrollX();
if(scrol < 50){
//滚动距离小于屏幕1/4,回滚
holder.hsv.smoothScrollTo(0, 0);
}else{
//移动到最后端
holder.hsv.smoothScrollTo( 1000, 0);
}
}
/**
* 返回true,表示不需要父组件再去处理此事件
* 返回false,不能实现上面的全滚动效果
*/
return true;
}
return false;
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: