建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Android中怎么使用ListView實現(xiàn)滾輪動畫效果
今天就跟大家聊聊有關Android中怎么使用ListView實現(xiàn)滾輪動畫效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、成都網(wǎng)站建設、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務孟連,10多年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792
/**
* 中點的Y坐標
*/
private float centerY = 0f;
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
//計算中點
centerY = getHeight()/2;
//判斷中點的有效性
if(centerY <= 0){
return;
}
//開始對當前顯示的View進行縮放
for(int i = 0; i < visibleItemCount; i++){
//獲取item
View temp_view = getChildAt(i);
//計算item的中點Y坐標
float itemY = temp_view.getBottom()-(temp_view.getHeight()/2);
//計算離中點的距離
float distance = centerY;
if(itemY > centerY){
distance = itemY - centerY;
}else{
distance = centerY - itemY;
}
//根據(jù)距離進行縮放
temp_view.setScaleY(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY));
temp_view.setScaleX(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY));
//根據(jù)距離改變透明度
temp_view.setAlpha(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY));
}
}后面不想加demo了，所以直接上整個ListView的代碼吧
/**
* 模仿滾輪動畫縮放的ListView
* Created by xu on 2017/3/3.
*/
public class XuListView extends ListView implements AbsListView.OnScrollListener {
private static final String TAG = "XuListView";
/**
* 中點的Y坐標
*/
private float centerY = 0f;
public XuListView(Context context, AttributeSet attrs) {
super(context, attrs);
//設置一個滾動監(jiān)聽
setOnScrollListener(this);
}
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
//計算中點
centerY = getHeight()/2;
//判斷中點的有效性
if(centerY <= 0){
return;
}
//開始對當前顯示的View進行縮放
for(int i = 0; i < visibleItemCount; i++){
//獲取item
View temp_view = getChildAt(i);
//計算item的中點Y坐標
float itemY = temp_view.getBottom()-(temp_view.getHeight()/2);
//計算離中點的距離
float distance = centerY;
if(itemY > centerY){
distance = itemY - centerY;
}else{
distance = centerY - itemY;
}
//根據(jù)距離進行縮放
temp_view.setScaleY(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY));
temp_view.setScaleX(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY));
//根據(jù)距離改變透明度
temp_view.setAlpha(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY));
}
}
}這樣基本就實現(xiàn)了我們想要的效果了
但是現(xiàn)在有一個問題，就是第一個item和最后一個item無法滾動到中間從而放大突出顯示。對此我暫時想了兩個方法去解決：1、在頭尾各種添加一些空白的item，使我們需要顯示的數(shù)據(jù)都可以滾動到最中間。（我現(xiàn)在就是這么做的）；2、使整個列表實現(xiàn)循環(huán)滾動。
添加空白的item的話，我是通過修改adapter去實現(xiàn)的。數(shù)據(jù)源是一個數(shù)組，我在數(shù)組前面和后面各加一些特殊的數(shù)據(jù)，adapter實現(xiàn)getview的時候，如果發(fā)現(xiàn)當前item的數(shù)據(jù)是特殊數(shù)據(jù)，那么item就變透明，從而實現(xiàn)了我們原本要顯示的數(shù)據(jù)都可以被滾動最中間；
先從數(shù)據(jù)源下手，從頭尾填充特殊的數(shù)據(jù)
public class MainActivity extends AppCompatActivity {
XuListView mLisetview;
MyAdapter adapter;
ArrayList nos = new ArrayList();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLisetview = (XuListView) findViewById(R.id.list_test);
ArrayList temp = new ArrayList();
for(int i = 0;i<10;i++){
temp.add(i+"");
}
adapter = new MyAdapter(this,temp);
mLisetview.setAdapter(adapter);
resetitem(mLisetview);
}
/**
* 在頭尾填充透明的item數(shù)據(jù)
*/
private void resetitem(ListView listview) {
if(listview == null){
return;
}
//獲取屏幕高度
WindowManager wm =getWindowManager();
int displayheight = wm.getDefaultDisplay().getHeight();
//計算一個item的高度
int itemhight = 0;
if(adapter!=null){
View v=(View)adapter.getView(0, null, listview);
v.measure(
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
itemhight=v.getMeasuredHeight();
}
//根據(jù)Item的高度和屏幕的高度計算需要多少個item可以填滿一半的屏幕
int newcount = ((displayheight/2)/itemhight);
//填充前面的空白item
for (int i = 1; i <= newcount; i++) {
nos.add("full");
}
//添加我們需要顯示的數(shù)據(jù)
for(int i = 0;i<10;i++){
nos.add(i+"");
}
//填充后面的空白item
for (int i = 1; i <= newcount; i++) {
nos.add("full");
}
//刷新數(shù)據(jù)
adapter.refreshData(nos);
}
} 然后adapter里面對頭尾的特殊數(shù)據(jù)進行識別，將item變?yōu)橥该鞯摹?/p>
public class MyAdapter extends BaseAdapter {
ArrayList nos = new ArrayList();
private Context context;
public MyAdapter(Context context, ArrayList nos){
this.context = context;
this.nos = nos;
}
public void refreshData(ArrayList nos) {
this.nos = nos;
notifyDataSetChanged();
}
@Override
public int getCount() {
return nos.size();
}
@Override
public Object getItem(int position) {
return nos.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) {
// 如果是第一次顯示該頁面(要記得保存到viewholder中供下次直接從緩存中調(diào)用)
holder = new ViewHolder();
convertView = LayoutInflater.from(context).inflate(R.layout.item_test, null);
holder.tv_no = (TextView) convertView.findViewById(R.id.tv_no);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.tv_no.setText(nos.get(position));
if(nos.get(position).equals("full")){
convertView.setVisibility(View.INVISIBLE);
}else{
convertView.setVisibility(View.VISIBLE);
}
return convertView;
}
private class ViewHolder {
TextView tv_no;
}
} 這樣我們就實現(xiàn)可以第一種解決方法
第二種方法，就是讓整個ListView實現(xiàn)循環(huán)滾動，實現(xiàn)的方式有很多，大家可以自行百度，我這里就通過修改adapter的getCount方法去實現(xiàn)，就是在getCount方法return一個很大的值，getView獲取數(shù)據(jù)的時候要模原本的數(shù)組大小，不然數(shù)組就越界了。然后ListView滾動到最中間，這樣就實現(xiàn)偽循環(huán)滾動了
public class MainActivity extends AppCompatActivity {
XuListView mLisetview;
MyAdapter adapter;
ArrayList nos = new ArrayList();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLisetview = (XuListView) findViewById(R.id.list_test);
ArrayList temp = new ArrayList();
for(int i = 0;i<10;i++){
temp.add(i+"");
}
adapter = new MyAdapter(this,temp);
mLisetview.setAdapter(adapter);
//滾動到中間
mLisetview.setSelection(adapter.getCount()/2);
}
} /**
* Created by xu on 2017/6/27.
*/
public class MyAdapter extends BaseAdapter {
ArrayList nos = new ArrayList();
private Context context;
public MyAdapter(Context context, ArrayList nos){
this.context = context;
this.nos = nos;
}
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public Object getItem(int position) {
return nos.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) {
// 如果是第一次顯示該頁面(要記得保存到viewholder中供下次直接從緩存中調(diào)用)
holder = new ViewHolder();
convertView = LayoutInflater.from(context).inflate(R.layout.item_test, null);
holder.tv_no = (TextView) convertView.findViewById(R.id.tv_no);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.tv_no.setText(nos.get(position%nos.size()));
return convertView;
}
private class ViewHolder {
TextView tv_no;
}
} 這樣我們就實現(xiàn)了使列表進行循環(huán)滾動，從而達到每個item都可以滾動到中間突出顯示的效果了
既然我們把動畫效果都做出來了，那么也可以直接做成一個滾輪選擇器，只需要加多兩步：1、把最靠近中間的item滾動到中間；2、把中間的item的序號通過一個接口返回出去。 我就直接貼代碼吧，反正也不難。
把最靠近中間的item滾動到中間的實現(xiàn)我是這么做的:首先決定好整個ListView可視的的item數(shù)量是多少，必須是奇數(shù)，這樣才能只有一個item處于正中間，然后根據(jù)ListView的高度計算出每個item符合要求的高度，然后更改現(xiàn)有的item的高度，同時對內(nèi)容進行縮放（不縮放內(nèi)容單純高度變小的話布局就亂了）。最后我們利用smoothScrollToPosition方法回正可視item中的第一個item，就實現(xiàn)了將最中間的item回滾到最中間的效果了。因為可視的item我們是根據(jù)ListView的高度去計算item的高度的，所有的可視item剛好鋪滿ListView，所以只要頂部那個回正了，其他的item也會回正。所以我們可以重寫一下OnScrollListener的onScrollStateChanged方法，每次滾動結束就執(zhí)行一次回滾
/**
* 可視的item數(shù)
*/
private int mVisibleItemCount = -1;
/**
* 沒調(diào)整之前每個item的高度
*/
private float olditemheight = 0;
/**
* 調(diào)整過后的每個item的高度
*/
private float newitemheight = -1;
/**
* 調(diào)整每個可視的item的高度 以及對內(nèi)容進行縮放
*/
public void reSetItemHeight() {
for (int i = 0; i < getChildCount(); i++) {
//獲取item
View temp_view = getChildAt(i);
//設置item的高度
ViewGroup.LayoutParams lp = temp_view.getLayoutParams();
lp.height = (int) newitemheight;
temp_view.setLayoutParams(lp);
//縮放內(nèi)容 我的item的內(nèi)容用一個LinearLayout包了起來 所以直接縮放LinearLayout
LinearLayout item_ll_value = (LinearLayout) temp_view.findViewById(R.id.item_ll_value);
item_ll_value.setScaleY((newitemheight / olditemheight) < 0 ? 0 : (newitemheight / olditemheight));
item_ll_value.setScaleX((newitemheight / olditemheight) < 0 ? 0 : (newitemheight / olditemheight));
}
}
/**
* 計算在給定的可視item數(shù)目下 每個item應該設置的高度
* */
private void getNewItemHeight() {
//先把舊的item存起來
olditemheight = getChildAt(0).getHeight();
//計算新的高度
newitemheight = getHeight() / mVisibleItemCount;
if ((getHeight() / mVisibleItemCount) % newitemheight > 0) {
//除不盡的情況下把余數(shù)分給各個item，暫時發(fā)現(xiàn)分一次余數(shù)就夠了，如果效果不理想就做個遞歸多分幾次
float remainder = (getHeight() / mVisibleItemCount) % newitemheight;
newitemheight = remainder / mVisibleItemCount;
}
}
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
//滾動結束之后開始回滾item
if (scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE && mVisibleItemCount != -1) {
//使離中間最近的item回滾到中點位置
smoothScrollToPosition(getFirstVisiblePosition());
}
}實現(xiàn)了把最靠近中間的item滾動到中間，那么選擇的item就是滾動結束后處于最中間的item。對此我們需要再次重寫一下OnScrollListener的onScrollStateChanged方法。每次滾動結束后，取可視item中的第一個item的序號加上我們之前設置的可視item數(shù)的一半（舍去小數(shù)部分）就是最中間的item的序號了，也是當前選擇項的序號。
/**
* 當前選中項發(fā)生變化的監(jiān)聽者
*/
private onSelectionChangeLisenter selectionChangeLisenter;
/**
* 設置選中項的監(jiān)聽者
*/
public void setSelectionChangeLisenter(onSelectionChangeLisenter selectionChangeLisenter) {
this.selectionChangeLisenter = selectionChangeLisenter;
}
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
//滾動結束之后開始正?；貪Litem并記錄最中間的item為選中項 (必須設置可視項，ListView才會改為選擇器模式)
if( scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE && mVisibleItemCount != -1){
//使離中間最近的item回滾到中點位置
smoothScrollToPosition(getFirstVisiblePosition());
//計算當前選中項的序號
int nowPosition = getFirstVisiblePosition() + mVisibleItemCount/2;
//把當前選中項的序號存起來并通過listener回調(diào)出去
if(selectionChangeLisenter != null && nowPosition != curPosition){
curPosition = nowPosition;
selectionChangeLisenter.onSelectionChange(curPosition);
}
}
}此處我是使用了一個接口去，用以實時把最新的數(shù)據(jù)返回出去
/**
* Created by xu on 2017/3/3.
*/
public interface onSelectionChangeLisenter {
void onSelectionChange(int position);
}使用這個滾輪選擇器的方法也非常簡單，除了跟正常的ListView初始化和綁定adapter之外，只需要額外調(diào)用兩個方法就行了
//設置ListView的可視item數(shù)（必須是奇數(shù)） mLisetview.setVisibleItemCount(3);
//設置監(jiān)聽者監(jiān)聽選中項的變化
mLisetview.setSelectionChangeLisenter(new onSelectionChangeLisenter() {
@Override
public void onSelectionChange(final int position) {
mHandler.post(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this,"選擇項發(fā)生變化 當前選中序號："+(temp.get(position)),Toast.LENGTH_SHORT).show();
}
});
}
});這樣我們就實現(xiàn)滾輪數(shù)字選擇器的效果了
現(xiàn)在貼下整個滾輪選擇器的完整代碼
/**
* 模仿滾輪動畫縮放的ListView
* Created by xu on 2017/3/3.
*/
public class XuListView extends ListView implements AbsListView.OnScrollListener {
private static final String TAG = "XuListView";
/**
* 中點的Y坐標
*/
private float centerY = 0f;
/**
* 可視的item數(shù)
*/
private int mVisibleItemCount = -1;
/**
* 沒調(diào)整之前每個item的高度
*/
private float olditemheight = 0;
/**
* 調(diào)整過后的每個item的高度
*/
private float newitemheight = -1;
/**
* 當前選中項發(fā)生變化的監(jiān)聽者
*/
private onSelectionChangeLisenter selectionChangeLisenter;
/**
* 當前選中項的序號
*/
private int curPosition = -1;
public XuListView(Context context, AttributeSet attrs) {
super(context, attrs);
//設置一個滾動監(jiān)聽
setOnScrollListener(this);
}
/**
* 設置選中項的監(jiān)聽者
*/
public void setSelectionChangeLisenter(onSelectionChangeLisenter selectionChangeLisenter) {
this.selectionChangeLisenter = selectionChangeLisenter;
}
/**
* 設置ListView的顯示item數(shù)
* @param count ：必須是奇數(shù) 如果為-1 則表示只是使用動畫效果的普通ListView
*/
public boolean setVisibleItemCount(int count){
if(count % 2 == 0){
return false;
}else{
mVisibleItemCount = count;
return true;
}
}
/**
* 在這里第一次調(diào)整item高度
*/
@Override
public void onWindowFocusChanged(boolean hasWindowFocus) {
super.onWindowFocusChanged(hasWindowFocus);
if(mVisibleItemCount != -1){
getNewItemHeight();
reSetItemHeight();
}
}
/**
* 調(diào)整每個可視的item的高度 以及對內(nèi)容進行縮放
*/
public void reSetItemHeight(){
for(int i = 0; i < getChildCount(); i++){
//獲取item
View temp_view = getChildAt(i);
//設置item的高度
ViewGroup.LayoutParams lp = temp_view.getLayoutParams();
lp.height = (int)newitemheight;
temp_view.setLayoutParams(lp);
//縮放內(nèi)容 我的item的內(nèi)容用一個LinearLayout包了起來 所以直接縮放LinearLayout
LinearLayout item_ll_value = (LinearLayout)temp_view.findViewById(R.id.item_ll_value);
item_ll_value.setScaleY((newitemheight / olditemheight) < 0 ? 0 : (newitemheight / olditemheight));
item_ll_value.setScaleX((newitemheight / olditemheight) < 0 ? 0 : (newitemheight / olditemheight));
}
}
/**
* 計算在給定的可視item數(shù)目下 每個item應該設置的高度
*/
private void getNewItemHeight(){
//先把舊的item存起來
olditemheight = getChildAt(0).getHeight();
//計算新的高度
newitemheight = getHeight()/mVisibleItemCount;
if((getHeight()/mVisibleItemCount) % newitemheight > 0){
//除不盡的情況下把余數(shù)分給各個item，暫時發(fā)現(xiàn)分一次余數(shù)就夠了，如果效果不理想就做個遞歸多分幾次
float remainder = (getHeight()/mVisibleItemCount) % newitemheight;
newitemheight = remainder/mVisibleItemCount;
}
}
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
//滾動結束之后開始正?；貪Litem并記錄最中間的item為選中項 (必須設置可視項，ListView才會改為選擇器模式)
if( scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE && mVisibleItemCount != -1){
//使離中間最近的item回滾到中點位置
smoothScrollToPosition(getFirstVisiblePosition());
//計算當前選中項的序號
int nowPosition = getFirstVisiblePosition() + mVisibleItemCount/2;
//把當前選中項的序號存起來并通過listener回調(diào)出去
if(selectionChangeLisenter != null && nowPosition != curPosition){
curPosition = nowPosition;
selectionChangeLisenter.onSelectionChange(curPosition);
}
}
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
//計算中點
centerY = getHeight()/2;
//判斷中點的有效性
if(centerY <= 0){
return;
}
//開始對當前顯示的View進行縮放
for(int i = 0; i < visibleItemCount; i++){
//獲取item
View temp_view = getChildAt(i);
//計算item的中點Y坐標
float itemY = temp_view.getBottom()-(temp_view.getHeight()/2);
//計算離中點的距離
float distance = centerY;
if(itemY > centerY){
distance = itemY - centerY;
}else{
distance = centerY - itemY;
}
//根據(jù)距離進行縮放
temp_view.setScaleY(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY));
temp_view.setScaleX(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY));
//根據(jù)距離改變透明度
temp_view.setAlpha(1.1f - (distance / centerY) < 0 ? 0 : 1.1f - (distance / centerY));
}
}
}看完上述內(nèi)容，你們對Android中怎么使用ListView實現(xiàn)滾輪動畫效果有進一步的了解嗎？如果還想了解更多知識或者相關內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
本文標題：Android中怎么使用ListView實現(xiàn)滾輪動畫效果
標題來源：http://fisionsoft.com.cn/article/jpgdjg.html
