Android 멋 진 안내 창 그리 기
먼저 레이아웃 파일 을 보십시오.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_guide"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.coderwei.a71_zhbj.activity.GuideActivity">
<android.support.v4.view.ViewPager
android:id="@+id/vp_guide"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<Button
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="70dp"
android:padding="10dp"
android:id="@+id/start_btn"
android:textColor="#f1eaea"
android:background="#e71616"
android:text=" "
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp">
<LinearLayout
android:id="@+id/ll_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>
<ImageView
android:id="@+id/iv_red"
android:src="@drawable/shap_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>
그리고 코드 입 니 다.
public class GuideActivity extends Activity {
private ViewPager mViewPager;
private int[] mImageIds = new int[]{R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};
private ArrayList<ImageView> mImageViewList;
private LinearLayout llContainer;
private ImageView ivRedPoint;
private int mPaintDis;
private Button start_btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
uper.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_guide);
mViewPager = (ViewPager)findViewById(R.id.vp_guide);
llContainer = (LinearLayout) findViewById(R.id.ll_container);
ivRedPoint = (ImageView) findViewById(R.id.iv_red);
start_btn = (Button) findViewById(R.id.start_btn);
initData();
GuideAdapter adapter = new GuideAdapter();
mViewPager.setAdapter(adapter);
//
ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
// ,
ivRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);
// left
mPaintDis = llContainer.getChildAt(1).getLeft()-llContainer.getChildAt(0).getLeft();
System.out.println(" :"+mPaintDis);
}
});
//ViewPager Pager
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
//
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// Pager ,positionOffset 0,position 1, position*mPaintDis
int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;
// leftMargin
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)ivRedPoint.getLayoutParams();
params.leftMargin = letfMargin;
ivRedPoint.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {
System.out.println("position:"+position);
if (position==mImageViewList.size()-1){
start_btn.setVisibility(View.VISIBLE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
System.out.println("state:"+state);
}
});
}
private void initData(){
mImageViewList = new ArrayList<>();
for (int i=0; i<mImageIds.length; i++){
// ImageView mImgaeViewIds
ImageView view = new ImageView(this);
view.setBackgroundResource(mImageIds[i]);
// ImageView
mImageViewList.add(view);
// ImageView
ImageView pointView = new ImageView(this);
pointView.setImageResource(R.drawable.shape);
// , ,
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
if (i>0){
// 10dp;
params.leftMargin=10;
}
//
pointView.setLayoutParams(params);
// LinearLayout
llContainer.addView(pointView);
}
}
class GuideAdapter extends PagerAdapter{
//item
@Override
public int getCount() {
return mImageViewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
// item
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView view = mImageViewList.get(position);
container.addView(view);
return view;
}
// item
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
}
}
작은 회색 점:
<?xml version="1.0" encoding="utf-8"?>
<shape
android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- -->
<solid android:color="#cccccc"/>
<size android:width="10dp" android:height="10dp"/>
</shape>
작은 붉 은 점:
<?xml version="1.0" encoding="utf-8"?>
<shape
android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#f00"/>
<size android:width="10dp" android:height="10dp"/>
</shape>
View Page 는 모두 간단 합 니 다.지난 블 로그 에서 도 상세 하 게 소 개 했 습 니 다.여 기 는 자세히 말 하지 않 겠 습 니 다.주로 아래 의 작은 빨 간 점 이 Pager 와 함께 갑 니 다.위 에 사실은 세 개의 작은 회색 점 이 있 고 그 다음 에 작은 회색 점 위 에 작은 빨간색 점 이 있 습 니 다.첫 번 째 작은 회색 점 과 두 번 째 작은 회색 점 사이 의 거 리 를 계산 하면 우 리 는 ViewPager 의 미끄럼 감청 을 설정 한 다음 에 빨간색 점 을 pager 에 따라 움 직 일 수 있 습 니 다(부모 컨트롤 의 내부 거 리 를 바 꿀 수 있 습 니 다).
작은 회색 점 사이 의 거 리 를 계산 할 때 주의해 야 할 것 은 레이아웃 위치 가 확 정 될 때 까지 기 다 려 야 작은 회색 점 사이 의 거리(인터페이스 생 성 과정 measure->layot(위치 확인)->draw(activity 의 onCreate 방법 이 실 행 된 후에 야 이 흐름 을 걸 을 수 있 습 니 다)를 설정 해 야 합 니 다.
ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener()
그리고 작은 회색 점 사이 의 거리:
mPaintDis = llContainer.getChildAt(1).getLeft()-llContainer.getChildAt(0).getLeft();
주의해 야 할 것 은 이 코드 입 니 다.
int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;
position Offset 은 현재 미 끄 러 지 는 백분율 입 니 다.두 번 째 page 에 들 어 갈 때 값 은 0 입 니 다.
position 은 현재 몇 번 째 page 를 대표 합 니 다.0 부터 시작 합 니 다.즉,제 가 두 번 째 page 로 미 끄 러 졌 을 때 mPaintDis*0+1*mPaintDis;
PS:사고의 총화:
1.페이지 는 ViewPager+Button+RelativeLayout(LinearLayout+TextView)로 구성 되 어 있 습 니 다.
2.LinearLayout 는 작은 회색 점 을 넣 었 습 니 다.작은 회색 점 의 개 수 는 ViewPager 의 개수 에 의 해 생각 되 기 때문에 LinearLayout 가 작은 회색 점 을 추가 할 때 VIEwPager 의 이미지 자원 과 집합 에 추 가 된 것 입 니 다.
3.그 다음 에 빨 간 점 은 바로 TextView 입 니 다.상대 적 으로 배치 되 기 때문에 빨 간 점 의 초기 위 치 는 작은 회색 점 의 첫 번 째 점 과 겹 칩 니 다.
4.그 다음 에 ViewPager 의 미끄럼 사건 을 감청 하고 첫 번 째 와 두 번 째 작은 회색 점 의 왼쪽 에서 LinearLayout 의 왼쪽 까지 의 거리 차 이 를 계산 하여 작은 빨간색 점 의 위 치 를 이동 해 야 합 니 다.그러나 위 치 를 확인 하 는 검 체 는 구조의 위치 가 확정 되 었 기 때문에 우 리 는 구조 가 확정 되 었 는 지 확인 한 후에 위치 차 이 를 계산 해 야 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.