安卓Gallery之自定義圖片邊框
阿新 • • 發佈:2019-01-05
作為一個初入門級別安卓菜鳥,我從CSDN上也學到了不少的東西,今天想著寫篇文章作為自己的處女秀,力求一篇文章解決一個問題,如標題所說,希望老鳥勿噴。
上面是一張效果圖,由於還沒細細研究gif動畫得製作,大家就將就著看了,下面上程式碼,程式碼即文件,鄙人喜歡把程式碼註釋的比較完善,所以就不多解釋了。
首先是MainActivity,自己看程式碼,圖片陣列資源在drawable中引用。
public class MainActivity extends Activity implements OnItemSelectedListener{ /** 介面上指示當前照片的TextView控制元件 **/ private TextView tv_index; /** 介面上的Galley控制元件 **/ private Gallery mGallery; /**Gallery的介面卡**/ private MyGalleryAdapter mAdapter ; /** 測試用的圖片陣列。該陣列就是圖片資源的引用 **/ private Integer[] imgs = new Integer[] { R.drawable.pic01, R.drawable.pic02, R.drawable.pic03, R.drawable.pic04, R.drawable.pic05, }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 載入介面佈局檔案 setContentView(R.layout.activity_main); // 初始化介面控制元件 initView(); } /** 初始化介面的控制元件 **/ private void initView() { // 獲取介面的控制元件 tv_index = (TextView) this.findViewById(R.id.txtIndex); mGallery = (Gallery) this.findViewById(R.id.galleryShow); // 為Gallery新建介面卡,傳入圖片陣列 mAdapter = new MyGalleryAdapter(this,imgs); // 為Gallery配置介面卡 mGallery.setAdapter(mAdapter); // 為mGallery繫結選中監聽器,否則指示器不工作 mGallery.setOnItemSelectedListener(this); } @Override public void onItemSelected(AdapterView<?> parent, View view, int position, long id) { // TODO Auto-generated method stub // 設定照片指示器,指示當前照片的張數和總數 tv_index.setText((position+1)+"/"+mAdapter.getCount()); } @Override public void onNothingSelected(AdapterView<?> parent) { // TODO Auto-generated method stub } }
接著看Gallery的介面卡MyGalleryAdapter
介面卡中最重要的部分是重寫的getView的方法,程式碼中我已經做了詳細的註釋,其餘的部分大家可以自行研究。@SuppressWarnings("deprecation") public class MyGalleryAdapter extends BaseAdapter { /** 執行的上下文環境 **/ private Context context = null; /** 要進行展示的相簿的陣列,從外部傳入的引數 **/ private Integer[] imgs = null; /** gallery中的ImageView控制元件 **/ private ImageView imgView = null; /**邊框的寬度**/ private static final int BOUND_WIDTH = 5 ; public MyGalleryAdapter() { super(); // TODO Auto-generated constructor stub } /** * 自定義Gallery構造引數 * * @param context * 執行的上下文環境 * @param imgs * 要展示的相片的陣列 */ public MyGalleryAdapter(Context context, Integer[] imgs) { super(); this.context = context; this.imgs = imgs; } /** * 自定義Gallery構造引數 * * @param context * 執行的上下文環境 */ public MyGalleryAdapter(Context context) { super(); this.context = context; } @Override public int getCount() { // TODO Auto-generated method stub return imgs.length; } @Override public Object getItem(int position) { // TODO Auto-generated method stub return position; } @Override public long getItemId(int id) { // TODO Auto-generated method stub return id; } // 這個方法很重要 @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub // 首先這裡的imgView是Gallery中將要顯示的圖片的容器,已經定義成全域性變數 imgView = new ImageView(context); // 設定圖片的來源,外部傳入的圖片陣列 imgView.setImageResource(imgs[position]); // 設定圖片自適應邊界 imgView.setAdjustViewBounds(true); // 由於相框的邊框寬度設定為向內收縮的大小,上下左右四個方向向內收縮的大小 imgView.setPadding(BOUND_WIDTH, BOUND_WIDTH, BOUND_WIDTH, BOUND_WIDTH); // 適應整個螢幕 imgView.setScaleType(ScaleType.FIT_XY); // 設定LayoutParams引數 imgView.setLayoutParams(new Gallery.LayoutParams( LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); // 在該ImageView的外面再包一層佈局,這層佈局用來作為邊框 LinearLayout linearLay = new LinearLayout(context); linearLay.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); // 設定邊框的背景 linearLay.setBackgroundResource(R.drawable.main_photo_frame); // 將ImageView新增到這個佈局中去,然後返回該佈局 linearLay.addView(imgView); // 返回具有邊框的佈局 return linearLay; } }
然後是MainActivity中的佈局檔案,一個文字框,用來做相簿的指示器,一個Gallery控制元件,測試的時候,越簡單越能研究透徹一個控制元件。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.cjt.gallerydemo.MainActivity" > <!-- 指示當前的照片 --> <TextView android:id="@+id/txtIndex" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:textSize="20sp" android:textStyle="bold" /> <!-- 展示照片的Gallery --> <Gallery android:id="@+id/galleryShow" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:spacing="10dp" android:layout_alignLeft="@+id/txtIndex" android:layout_below="@+id/txtIndex"/> </RelativeLayout>
最後是getView中
// 設定邊框的背景
linearLay.setBackgroundResource(R.drawable.main_photo_frame);
這一句中引用xml檔案
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="2dp" />
<!-- 線條的顏色和寬度 -->
<!-- 這裡邊框的顏色屬性和寬度可以自行設定,寬度設定的時候注意跟MyGalleryAdapter中的 private static final int BOUND_WIDTH = 5 保持一致 -->
<stroke
android:width="5dp"
android:color="#F89" />
<!-- 填充部分的顏色 -->
<solid android:color="#0fff" />
<!-- 收縮 -->
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
好了,到此就大功告成了,想要修改邊框的寬度或者顏色什麼的都可以在這個xml檔案中修改,