android 圖片橫向滾動效果 原創【安卓進化五】

   近日有個同事要做一個效果：圖片橫向排列，而且可以橫向滾動，而且能點擊圖片觸發事件，用gallery也可以實現這個效果，現在我用ImageButton來實現，在xml檔案中用HorizontalScrollView包起來這個布局檔案就可以了。現把代碼分享給大家;先貼圖讓大家看一眼效果：

整個隊列在左邊：                 整個隊列在中間：                整個隊列在右邊：

     

一、main.xml布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    ><HorizontalScrollView android:id="@+id/HorizontalScrollView01"   android:fadingEdgeLength="0.0dip" android:background="#5B5B5B"   android:layout_width="fill_parent" android:scrollbars="none"   android:layout_height="fill_parent">   <LinearLayout android:layout_width="wrap_content"    android:id="@+id/toolbar_items" android:paddingBottom="7.0dip"    android:orientation="horizontal" android:layout_height="wrap_content"    android:paddingTop="7.0dip">    <ImageView android:layout_height="51.0dip"     android:layout_width="wrap_content" android:src="@drawable/icon" />    <LinearLayout android:layout_width="wrap_content"     android:background="#ffffff" android:layout_height="51.0dip">     <ImageButton android:background="@drawable/icon"      android:layout_width="59.0dip" android:layout_height="51.0dip"      android:scaleType="centerInside" android:id="@+id/back_main">     </ImageButton>     <LinearLayout android:paddingLeft="12.0dip"      android:layout_height="51.0dip" android:layout_width="1sp"      android:background="#000000">     </LinearLayout>     <ImageButton android:id="@+id/new_doc"      android:layout_width="59.0dip" android:layout_height="51.0dip"      android:scaleType="centerInside" android:background="@drawable/icon">     </ImageButton>     <LinearLayout android:layout_height="51.0dip"      android:layout_width="1sp" android:background="#000000">     </LinearLayout>     <ImageButton android:id="@+id/filter_doc"      android:layout_width="59.0dip" android:layout_height="51.0dip"      android:scaleType="centerInside" android:background="@drawable/icon">     </ImageButton>     <LinearLayout android:layout_height="51.0dip"      android:layout_width="1sp" android:background="#000000">     </LinearLayout>      <ImageButton android:id="@+id/multiselect_doc"      android:layout_width="59.0dip" android:layout_height="51.0dip"      android:scaleType="centerInside" android:background="@drawable/icon">     </ImageButton>     <LinearLayout android:layout_height="51.0dip"      android:layout_width="1sp" android:background="#000000">     </LinearLayout>     <ImageButton android:id="@+id/delete_doc"      android:layout_width="59.0dip" android:layout_height="51.0dip"      android:scaleType="centerInside" android:background="@drawable/icon">     </ImageButton>     <LinearLayout android:layout_height="51.0dip"      android:layout_width="1sp" android:background="#000000">     </LinearLayout>     <ImageButton android:id="@+id/property_doc" android:visibility="gone"      android:layout_width="59.0dip" android:layout_height="51.0dip"      android:scaleType="centerInside" android:background="@drawable/icon">     </ImageButton>     <LinearLayout android:layout_height="51.0dip"      android:layout_width="1sp" android:background="#000000">     </LinearLayout>     <ImageButton android:id="@+id/sort_doc"      android:layout_width="59.0dip" android:layout_height="51.0dip"      android:scaleType="centerInside" android:background="@drawable/icon">     </ImageButton>     <LinearLayout android:layout_height="51.0dip"      android:layout_width="1sp" android:background="#000000">     </LinearLayout>     <ImageButton android:id="@+id/send_doc"       android:layout_width="59.0dip" android:layout_height="51.0dip"      android:scaleType="centerInside" android:background="@drawable/icon">     </ImageButton>    </LinearLayout>    <ImageView android:layout_width="wrap_content"      android:layout_height="51.0dip" android:src="@drawable/icon" />   </LinearLayout>  </HorizontalScrollView></LinearLayout>

二、MainActivity類中的代碼：

package com.cn.android;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.view.animation.Animation;import android.view.animation.AnimationUtils;import android.view.animation.OvershootInterpolator;import android.widget.ImageButton;import android.widget.LinearLayout;public class MainActivity extends Activity {    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        //開啟項目整個隊列圖進入的效果動畫        LinearLayout toolbarLayout = (LinearLayout) findViewById(R.id.toolbar_items);        Animation animation = AnimationUtils           .loadAnimation(this, R.anim.toolbar);        animation.setInterpolator(new OvershootInterpolator());        // animation.setInterpolator(new BounceInterpolator());        toolbarLayout.startAnimation(animation);        initToolbarBtn();//初始化ImageButton    }    //響應按鈕點擊事件       private void initToolbarBtn() {        ImageButton backmain = (ImageButton) findViewById(R.id.back_main);        backmain.setOnClickListener(new View.OnClickListener() {               public void onClick(View v) {                 Intent i = getIntent();                 setResult(RESULT_CANCELED, i);                 finish();           }   });  ImageButton newdoc = (ImageButton) findViewById(R.id.new_doc);  newdoc.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {    //寫上自己要實現的方法   }  });    }}

三、自訂動畫實現從左向右滾動：在res下面建個檔案夾名字anim，下建立toolbar.xml<?xml version="1.0" encoding="UTF-8"?>；目的是開啟程式畫面的時候有個動畫的效果

<translate  android:duration="700" android:fromXDelta="100.0%p" android:toXDelta="0.0" xmlns:android="http://schemas.android.com/apk/res/android" />