7

введите сюда описание изображения

Подскажите, как можно сделать такую галерею картинок для Android. Пробовал HorizontalScrollView, PagerAdapter, CoverFlowCarousel, но эффекта не добился. Необходимо, чтобы на экране было 3 элемента. Средний должен динамически увеличиваться. После прокрутки он должен вставать по центру экрана

3
  • По идее надо совместить вот отсюда решение c проставлением, вроде, марджинов, фрагментам...
    – ЮрийСПб
    4 фев 2016 в 19:05
  • Вот тут хороший пример я думаю то что Вам нужно github.com/daimajia/ViewPagerTransforms
    – Дима
    4 фев 2016 в 20:04
  • Я давно делал урок, один в один, найду сразу оформлю. 5 фев 2016 в 7:55

1 ответ 1

10

введите сюда описание изображения

MainActivity.class

public class MainActivity extends FragmentActivity{
static final int PAGE_COUNT = 7;

ViewPager pager;
PagerAdapter pagerAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    pager = (ViewPager) findViewById(R.id.pager);
    pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
    pager.setPageTransformer(true, new ZoomOutPageTransformer());
    pager.setPageMargin(getResources().getDimensionPixelOffset(R.dimen.viewpager_margin));
    pager.setAdapter(pagerAdapter);

}
private class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }
    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position);
    }
    @Override
    public int getCount() {
        return PAGE_COUNT;
    }
  }
}

PageFragment.class

public class PageFragment extends Fragment
{
static final String PAGE_NUMBER_POSITION = "page_number_position";
static final String RED_COLOR = "#ff0608";           //каждый
static final String ORANGE_COLOR = "#ff591c";        //охотник
static final String YELLOW_COLOR = "#ffff1e";        //желает
static final String GREEN_COLOR = "#33ff4f";         //знать
static final String LIGHT_BLUE_COLOR = "#19e9ff";    //где
static final String BLUE_COLOR = "#004cff";          //сидит
static final String PURPLE_COLOR = "#df10ff";        //фазан

int pageNumber;

static PageFragment newInstance (int page) {
    PageFragment pageFragment = new PageFragment();
    Bundle arguments = new Bundle();
    arguments.putInt(PAGE_NUMBER_POSITION, page);
    pageFragment.setArguments(arguments);
    return pageFragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    pageNumber = getArguments().getInt(PAGE_NUMBER_POSITION);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    View myView = inflater.inflate(R.layout.fragment1, null);
    TextView myTxt = (TextView) myView.findViewById(R.id.myTxt);
    myTxt.setAnimation(AnimationUtils.loadAnimation(getActivity(), android.R.anim.fade_in));
    if (pageNumber == 0) {myTxt.setText("Каждый");myTxt.setBackgroundColor(Color.parseColor(RED_COLOR));}
    if (pageNumber == 1) {myTxt.setText("Охотник");myTxt.setBackgroundColor(Color.parseColor(ORANGE_COLOR));}
    if (pageNumber == 2) {myTxt.setText("Желает");myTxt.setBackgroundColor(Color.parseColor(YELLOW_COLOR));}
    if (pageNumber == 3) {myTxt.setText("Знать");myTxt.setBackgroundColor(Color.parseColor(GREEN_COLOR));}
    if (pageNumber == 4) {myTxt.setText("Где");myTxt.setBackgroundColor(Color.parseColor(LIGHT_BLUE_COLOR));}
    if (pageNumber == 5) {myTxt.setText("Сидит");myTxt.setBackgroundColor(Color.parseColor(BLUE_COLOR));}
    if (pageNumber == 6) {myTxt.setText("Фазан");myTxt.setBackgroundColor(Color.parseColor(PURPLE_COLOR));}
    return myView;
  }
}

activity_main.xml

<FrameLayout
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">

<android.support.v4.view.ViewPager
    android:padding="5dp"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</FrameLayout>

fragment1.xml

<FrameLayout
android:layout_marginLeft="@dimen/viewpager_margin_fix"
android:layout_marginRight="@dimen/viewpager_margin_fix"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myBackgroundColor"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:layout_marginLeft="@dimen/viewpager_margin_fix"
    android:layout_marginRight="@dimen/viewpager_margin_fix"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="1"
    android:id="@+id/myTxt"
    android:layout_gravity="center"
    android:textSize="45dp"
    android:gravity="center"/>
</FrameLayout>

dimens.xml

<resources>
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>

<dimen name="viewpager_margin">-128dp</dimen>
<dimen name="viewpager_margin_fix">64dp</dimen>
</resources>

Вот такой пример: Вкратце это обычный ViewPager, где мы играем c Margin, для того чтоб видеть "соседей". Остается проблема: когда мы создаем эти элементы при листинге смотрится не очень красиво, здесь мы всё скрываем двумя анимациями. Первая - стандартная взята из guidline google: ZoomOutPageTransformer вторая - тоже стандартная, для того чтоб элемент красиво (и незаметно) перерисовывался: android.R.anim.fade_in При изменении этих анимций на кастомные можно получить интересные эффекты, но не забудьте поставить соответствующие отступы в dimens.xml и enjoy)

6
  • Большое спасибо, почти то что надо. А можно добавить возможность быстрой прокрутки картинок? 7 фев 2016 в 12:33
  • Пример прокрутки 7 фев 2016 в 12:43
  • 1
    Да, можно. Вам необходимо написать кастомный pageAdapter,и изменить scrollMod, я не помню как точно называется, ну вы сразу найдете в поиске. Только поймите что работа идет с fragments, возможно для вашей реализации подойдет обычный список с ImageView, тот же (RecyclerView + ViewHolder) in ViewPager мне кажется отличный вариант. Я сейчас дам вам ссылку, какой-то хороший человек мне недавно её давал, мне кажется очень подходит для вашей реализации. Вот habrahabr.ru/company/eastbanctech/blog/267497 7 фев 2016 в 12:55
  • Спасибо. Я использую кастомный PagerAdapter, загружаю картинки из списка в ImageView (lazy load с помощью Glide). Не могу найти, как включить Scroll Mode для моего случая. Можете подсказать? 7 фев 2016 в 13:47
  • Сделал галерею с помощью RecyclerView вот по этому примеру plattysoft.com/2015/06/16/snapping-items-on-a-horizontal-list. Не могу понять, как туда добавить такой же зум на центральном элементе? 10 фев 2016 в 8:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.