안 드 로 이 드 앱 에 서 는 갤러리 를 이용 해 슬라이드 쇼 효 과 를 만든다.
우 리 는 가끔 아이 폰 이나 윈도 에서 동적 인 그림 을 볼 수 있 습 니 다.마우스 나 손가락 터치 로 이동 하여 동적 인 그림 스크롤 효 과 를 낼 수 있 고 클릭 이나 터치 에 따라 다른 이벤트 응답 을 촉발 할 수 있 습 니 다.마찬가지 로 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)슬라이드 효과 표시:
(2)상품 이미지 슬라이딩 전시
큰 그림 보기:
부분 코드 설명
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 의 직접적인 전환 을 잘 처리 하 세 요.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.