안 드 로 이 드 앱 에 서 는 갤러리 를 이용 해 슬라이드 쇼 효 과 를 만든다.

11486 단어 AndroidGallery
제로,갤러리 의 사용 회고
우 리 는 가끔 아이 폰 이나 윈도 에서 동적 인 그림 을 볼 수 있 습 니 다.마우스 나 손가락 터치 로 이동 하여 동적 인 그림 스크롤 효 과 를 낼 수 있 고 클릭 이나 터치 에 따라 다른 이벤트 응답 을 촉발 할 수 있 습 니 다.마찬가지 로 Android 에서 도 이러한 실현 을 제공 합 니 다.이것 이 바로 Gallery 를 통 해 UI 에서 미리 보기 브 라 우 저 를 실현 하 는 것 입 니 다.
Gallery 가 어떻게 실현 되 는 지 살 펴 보 겠 습 니 다.먼저 컨트롤 을 레이아웃 파일 에서 설명 하고 ID 가 gallery 라 는 것 만 알 아야 합 니 다.

Gallery gallery = (Gallery) findViewById(R.id.gallery); 
 일반적인 상황 에서 우 리 는 안 드 로 이 드 에서 이러한 이미지 용기 와 유사 한 컨트롤 을 사용 하려 면 어댑터 를 지정 하여 내용 을 우리 가 정의 한 방식 으로 표시 할 수 있 도록 해 야 합 니 다.따라서 우 리 는 어댑터 를 추가 합 니 다.이 어댑터 가 어떻게 구현 되 는 지,그 다음 에 조작 합 니 다.여 기 는 이 어댑터 의 종류 만 알 아야 합 니 다.

ImageAdapter。 gallery.setAdapter(new ImageAdapter(this));
다음은 중요 한 장면 입 니 다.어댑터 가 가장 중요 하 다 고 할 수 있 습 니 다.어떻게 하 는 지 볼 까요?여기까지 중요 한 것 이 부족 한 것 같은 데?뭐 지?우리 가 표시 해 야 할 것 은 그림 입 니 다.그러면 그림 을 먼저 준비 해 야 합 니 다.여기 서 우 리 는 5 장의 그림(drawable 폴 더 에 저장)을 준 비 했 습 니 다.우 리 는 어댑터 에서 사용 할 수 있 도록 IDs 로 색인 을 만 들 었 습 니 다.

private Integer[] mps = { 
  R.drawable.icon1, 
  R.drawable.icon2, 
  R.drawable.icon3, 
  R.drawable.icon4, 
  R.drawable.icon5 
}; 
OK,어댑터 를 정의 하기 시 작 했 습 니 다.BaseAdapter 를 계승 하여 이 루어 진 어댑터 입 니 다. 

public class ImageAdapter extends BaseAdapter { 
 private Context mContext; 
  public ImageAdapter(Context context) { 
  mContext = context; 
 } 
 
 public int getCount() { 
  return mps.length; 
 } 
 
 public Object getItem(int position) { 
  return position; 
 } 
 
 public long getItemId(int position) { 
  return position; 
 } 
 
 public View getView(int position, View convertView, ViewGroup parent) { 
  ImageView image = new ImageView(mContext); 
  image.setImageResource(mps[position]); 
  image.setAdjustViewBounds(true); 
  image.setLayoutParams(new Gallery.LayoutParams( 
   LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 
  return image; 
 } 
} 
이로써 갤러리 전체 가 기본적으로 먼저 완성 되 었 습 니 다.우 리 는 모니터 를 추가 해 야 합 니 다.그렇지 않 으 면 이 미리 보기 브 라 우 저 는 보기 만 하고 사용 할 수 없습니다.

gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { 
 @Override 
 public void onItemSelected(AdapterView<?> parent, View v,int position, long id) { 
 } 
 
 @Override 
 public void onNothingSelected(AdapterView<?> arg0) { 
 //       
 } 
}); 

1.효과 도 전시
최근 에 몇 가지 모 바 일 애플 리 케 이 션 을 다운로드 하여 연 구 를 한 결과 사용자 정의 컨트롤 이 놀 라 울 정도 로 비슷 하 다 고 생각 합 니 다.그래서 저 는 앞으로 개발 할 때 일부 컨트롤 에 대한 재 활용 이 많 을 것 이 라 고 생각 합 니 다.첫 페이지(불 러 오지 않 음 페이지)에 서 는 보통 슬라이드 효과 가 있 을 것 이 라 고 생각 합 니 다.광고 도 할 수 있 고 추천 도 할 수 있 습 니 다.그림 디자인 이 예 쁘 면 효과 가 좋 을 것 입 니 다.Gallery 를 사 용 했 으 니 액자 효과 의 예 를 덧 붙 여 써 보 세 요.(타 오 바 오 상세 화면 상품 이미지 슬라이딩 전시)
(1)슬라이드 효과 표시:
2016429144840422.jpg (482×284)
2016429144953428.jpg (482×282)
2016429145022604.jpg (482×284)
(2)상품 이미지 슬라이딩 전시
2016429145043263.jpg (480×199)
2016429145105549.jpg (480×199)
2016429145122886.jpg (480×198)
큰 그림 보기:
2016429145136108.jpg (483×719)
부분 코드 설명
1.슬라이드 효과 의 실현:
사용자 정의 갤러리:DetailGallery.java
시각 인터페이스:ImgSwitchActivity.java
적합 클래스:Gallery IndexAdapter.java
사용자 정의 Gallery 는 onFling 을 눌 러 서 놓 은 위치 와 달리 오른쪽으로 이동 하 는 지 왼쪽으로 이동 하 는 지 비교 합 니 다.일부 코드 는 다음 과 같 습 니 다.

private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {
 return e2.getX() > e1.getX();
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
  float velocityY) {
 int kEvent;
 if (isScrollingLeft(e1, e2)) {
  kEvent = KeyEvent.KEYCODE_DPAD_LEFT;
 } else {
  kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;
 }
 onKeyDown(kEvent, null);
 return true;
}

2.어 울 리 는 Gallery IndexAdapter 에서 슬라이드 의 순환 재생 을 완성 하고 getCount 에서 값 을 되 돌려 Integer.MAX 로 되 돌려 줍 니 다.VALUE,그리고 getView 에서 position 와 들 어 오 는 초기 그림 의 갯 수 에 따라 나머지 를 계산 하여 매번 어떤 그림 으로 순환 하 는 지 계산 합 니 다.부분 코드 는 다음 과 같 습 니 다.

@Override
 public int getCount() {
  // TODO Auto-generated method stub
  return Integer.MAX_VALUE;
 }
 
 ……
 
 @Override
 public View getView(int position, View convertView, ViewGroup arg2) {
  // TODO Auto-generated method stub
  ImageView imageView = new ImageView(context);
  imageView.setBackgroundResource(imagList.get(position%imagList.size()));
  imageView.setScaleType(ScaleType.FIT_XY);
  imageView.setLayoutParams(new Gallery.LayoutParams(Gallery.LayoutParams.FILL_PARENT
    , Gallery.LayoutParams.WRAP_CONTENT));
  return imageView;
 } 
     
3.시각 인터페이스 에서 논리 적 통 제 를 실현 하고 타이머 로 슬라이드 를 정기 적 으로 리 셋 합 니 다.타 이 머 는 정기 적 으로 메 시 지 를 보 내 고 메 시 지 를 받 는 처리 체 제 를 통 해 메 시 지 를 받 은 후에 미끄럼 사건 을 모 의 하고 Gallery 의 onFling 방법 으로 이미지 자동 전환 효 과 를 실현 합 니 다.단 추 를 선택 한 디 스 플레이 효과(RadioButton)는 Gallery 의 setOnitem Selected Listener 에서 처리 해 야 합 니 다. 

//        5        
/**       ,        */
 final Handler handler_gallery = new Handler() {
  public void handleMessage(Message msg) {
   /*            */
   MotionEvent e1 = MotionEvent.obtain(SystemClock.uptimeMillis(),
     SystemClock.uptimeMillis(), MotionEvent.ACTION_UP,
     89.333336f, 265.33334f, 0);
   /*            */
   MotionEvent e2 = MotionEvent.obtain(SystemClock.uptimeMillis(),
     SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN,
     300.0f, 238.00003f, 0);
    
   myGallery.onFling(e2, e1, -800, 0);
   /*  gallery          ,       */
   super.handleMessage(msg);
  }
 };
 protected void onResume() {
  autogallery();
  super.onResume();
 };
 private void autogallery() {
  /*      , 5         */
  Timer time = new Timer();
  TimerTask task = new TimerTask() {
   @Override
   public void run() {
    Message m = new Message();
    handler_gallery.sendMessage(m);
   }
  };
  time.schedule(task, 8000, 5000);
 }
//     gallery               
//   
 void init(){
  myGallery = (DetailGallery)findViewById(R.id.myGallery);
  gallery_points = (RadioGroup) this.findViewById(R.id.galleryRaidoGroup);
  ArrayList<Integer> list = new ArrayList<Integer>();
  list.add(R.drawable.banner1);
  list.add(R.drawable.banner2);
  list.add(R.drawable.banner3);
  list.add(R.drawable.banner4);
  GalleryIndexAdapter adapter = new GalleryIndexAdapter(list, context);
  myGallery.setAdapter(adapter);
  //     
  gallery_point = new RadioButton[list.size()];
  for (int i = 0; i < gallery_point.length; i++) {
   layout = (LinearLayout) inflater.inflate(R.layout.gallery_icon, null);
   gallery_point[i] = (RadioButton) layout.findViewById(R.id.gallery_radiobutton);
   gallery_point[i].setId(i);/*        ID */
   int wh = Tool.dp2px(context, 10);
   RadioGroup.LayoutParams layoutParams = new RadioGroup.LayoutParams(wh, wh); //        
   gallery_point[i].setLayoutParams(layoutParams);
   layoutParams.setMargins(4, 0, 4, 0);//      margin 
   gallery_point[i].setClickable(false);/*             */
   layout.removeView(gallery_point[i]);//               
   gallery_points.addView(gallery_point[i]);/*                    RadioGroup  */
  }
 }
 //    
 void addEvn(){
  myGallery.setOnItemSelectedListener(new OnItemSelectedListener() {
 
   @Override
   public void onItemSelected(AdapterView<?> arg0, View arg1,
     int arg2, long arg3) {
    // TODO Auto-generated method stub
    gallery_points.check(gallery_point[arg2%gallery_point.length].getId());
   }
 
   @Override
   public void onNothingSelected(AdapterView<?> arg0) {
    // TODO Auto-generated method stub
     
   }
  });
 }

4.상품 이미지 슬라이딩 실현 과정:
그림 의 미끄럼 효 과 는 위의 슬라이드 효과 와 매우 유사 하지만 논리 적 처리 와 인터페이스 에 약간의 차이 가 있 을 뿐이다.
(1)어댑터 류 Gallery Adapter.자바 위 에서 그림 크기 조정 처 리 를 하여 메모리 비용 을 절약 하고 그림 을 자신의 요구 에 따라 크기 조정 할 수 있 습 니 다.

//     case,             , position = 1         
public View getView(int position, View convertView, ViewGroup parent) {
   // TODO Auto-generated method stub
   ImageView imageView = (ImageView) LayoutInflater.from(context).inflate(R.layout.img,
     null);
   Bitmap bitmap = null;
   try {
    if(position == 1 ){
     bitmap = BitmapFactory.decodeStream(assetManager.open("xpic11247_s.jpg"));
     imageView.setTag("xpic11247_s.jpg");
    }
    else{
     bitmap = BitmapFactory.decodeStream(assetManager.open("item0_pic.jpg"));
     imageView.setTag("item0_pic.jpg");
    }
     
   } catch (IOException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
   //           
   int width = bitmap.getWidth();
   int height = bitmap.getHeight();
   float newHeight = 200;
   float newWidth = width*newHeight/height;
   float scaleWidth = ((float) newWidth) / width;
   float scaleHeight = ((float) newHeight) / height;
   //        matrix  
   Matrix matrix = new Matrix();
   matrix.postScale(scaleWidth, scaleHeight);
   //       
   Bitmap newbm = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
   System.out.println(newbm.getHeight()+"-----------"+newbm.getWidth());
   imageView.setImageBitmap(newbm);
   // }
   return imageView;
 
  }
       
(2)액자 효 과 를 추 가 했 습 니 다.그림 을 불 러 오 는 데 실패 하면 그림 을 압축 한 후에 크기 가 같은 액자 그림 이 나타 납 니 다.

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/waterfall_image"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/image_border"
 >
</ImageView>

3.개발 과정 에서 문제 가 발생 합 니 다.
1、

layout.removeView(gallery_point[i]);//                
현재 하위 childview 를 다른 view 에 추가 하려 면 현재 부모 View 에서 현재 childView 를 제거 해 야 합 니 다.이렇게 처리 하지 않 으 면 Caused by:java.lang.IllegalState Exception 이상 을 던 집 니 다.The specified child already has a parent.You must call removeView()on the child's parent first.
2.그림 크기 조정 을 할 때 dp 와 px 의 직접적인 전환 을 잘 처리 하 세 요.

좋은 웹페이지 즐겨찾기