Androidは1号の店の商品の詳細をまねる
まだ完全ではありません。現在は中間画像を注文してからしかシフトできません。画像以外の領域はありません。そうだ、フェイスブックのAndroidの画像をロードして、とてもNBな感じがします。
1、レイアウトを見てから
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
1、レイアウトを見てから
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#bfbfbf"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="300dp" />
<LinearLayout
android:id="@+id/ll_bottom_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item 1"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item 1"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item 1"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item 1"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item 1"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item 1"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item 1"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item 1"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item 1"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item 1"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item 1"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
<!-- , -->
<LinearLayout
android:id="@+id/ll_container_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#bfbfbf"
android:gravity="center"
android:orientation="horizontal"
android:visibility="invisible">
<!-- viewpager -->
<android.support.v4.view.ViewPager
android:id="@+id/viewPager_2"
android:layout_width="match_parent"
android:layout_height="300dp" />
</LinearLayout>
</RelativeLayout>
2、メインインターフェースコード
package com.newair.frescotextdemo;
import android.animation.Animator;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.ScrollView;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
import adapter.MyViewPagerAdapter;
import utils.ScreenUtils;
public class MainActivity extends AppCompatActivity {
private ScrollView scrollView;
private LinearLayout ll_container_scroll;//scrollview
private LinearLayout ll_bottom_container;//
private ViewPager viewPager;//
private ViewPager viewPager_2;
private MyViewPagerAdapter myViewPagerAdapter;//
private List<String> image_urls;
private int y; //
private boolean isRunAnimation = false;//
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
initEvent();
}
private void initView() {
scrollView = (ScrollView) findViewById(R.id.scrollView);
ll_container_scroll = (LinearLayout) findViewById(R.id.ll_container_scroll);
ll_bottom_container = (LinearLayout) findViewById(R.id.ll_bottom_container);
viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager_2 = (ViewPager) findViewById(R.id.viewPager_2);
}
private void initData() {
image_urls = new ArrayList<>();
image_urls.add("http://pic31.nipic.com/20130624/8821914_104949466000_2.jpg");
image_urls.add("http://pic39.nipic.com/20140307/2531170_213037883000_2.jpg");
image_urls.add("http://pic10.nipic.com/20101020/3650425_202918301404_2.jpg");
image_urls.add("http://pic4.nipic.com/20091104/3178344_085047585414_2.jpg");
image_urls.add("http://pic4.nipic.com/20091101/3672704_160309066949_2.jpg");
myViewPagerAdapter = new MyViewPagerAdapter(this, image_urls);
viewPager.setAdapter(myViewPagerAdapter);
viewPager_2.setAdapter(myViewPagerAdapter);
}
private void initEvent() {
//
myViewPagerAdapter.setOnCurrentPositionClickListener(new MyViewPagerAdapter.OnCurrentViewClick() {
@Override
public void onCurrentPositionClick(int position) {
if (viewPager.getTag() == null || ((Integer) viewPager.getTag()) == 1) {
showAnimation();
} else {
hideAnimation();
}
}
});
ll_bottom_container.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
hideAnimation();
}
});
}
//
public void showAnimation() {
if (!isRunAnimation) {
isRunAnimation = true;
int scrollY = scrollView.getScrollY();
y = scrollY + ((ll_container_scroll.getMeasuredHeight() / 2) - (viewPager.getMeasuredHeight() / 2));
viewPager.animate()
.x(0f)
.y(y * 1f)
.setDuration(500)
.setListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
ll_bottom_container.setVisibility(View.INVISIBLE);
}
@Override
public void onAnimationEnd(Animator animation) {
isRunAnimation = false;
viewPager.setTag(2);
y = 0;
ll_container_scroll.setVisibility(View.VISIBLE);
viewPager_2.setCurrentItem(viewPager.getCurrentItem(),false);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
}
}
//
public void hideAnimation() {
if (!isRunAnimation) {
viewPager.animate()
.x(0f)
.y(-y * 1f)
.setDuration(500)
.setListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
ll_container_scroll.setVisibility(View.INVISIBLE);
viewPager.setCurrentItem(viewPager_2.getCurrentItem(),false);
}
@Override
public void onAnimationEnd(Animator animation) {
isRunAnimation = false;
viewPager.setTag(1);
y = 0;
ll_bottom_container.setVisibility(View.VISIBLE);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
}
}
}
3、viewpagerのアダプターコード
package adapter;
import android.content.Context;
import android.net.Uri;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.facebook.drawee.view.SimpleDraweeView;
import com.newair.frescotextdemo.R;
import java.util.List;
/**
* Created by ouhimehime on 16/4/28.
* ---------ViewPager ----------
*/
public class MyViewPagerAdapter extends PagerAdapter {
public interface OnCurrentViewClick {
void onCurrentPositionClick(int position);
}
private OnCurrentViewClick onCurrentViewClick;
public void setOnCurrentPositionClickListener(OnCurrentViewClick onCurrentViewClick) {
this.onCurrentViewClick = onCurrentViewClick;
}
private Context context;
private List<String> myData;
public MyViewPagerAdapter(Context context, List<String> myData) {
this.context = context;
this.myData = myData;
}
@Override
public int getCount() {
return myData.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
SimpleDraweeView simpleDraweeView = (SimpleDraweeView) LayoutInflater.from(context).inflate(R.layout.image_view, null);
Uri uri = Uri.parse(myData.get(position));
simpleDraweeView.setImageURI(uri);
container.addView(simpleDraweeView);
simpleDraweeView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onCurrentViewClick.onCurrentPositionClick(position);
}
});
return simpleDraweeView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((SimpleDraweeView) object);
}
}
4、フェイスブックのロードイメージのコントロール
<?xml version="1.0" encoding="utf-8"?>
<com.facebook.drawee.view.SimpleDraweeView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
fresco:actualImageScaleType="centerCrop"
fresco:fadeDuration="300"
fresco:placeholderImage="@mipmap/ic_launcher">
</com.facebook.drawee.view.SimpleDraweeView>
まだよくないです。興味があるなら運行してみてください。以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。