MaterialViewPager-ユニークなアプリケーションを作成する例

最近、インターネットリソースからのニュースを表示できる興味深いアプリケーションを作成することにしました。アプリケーションインターフェイスの作成方法についての質問がありました。 海に来てください。しかし、GitHubを使用した1人の開発者の仕事に最も驚きました。彼の仕事はMaterial ViewPagerと呼ばれます。 使い方はとても簡単で、ここにすばらしいインストールガイドがあります。

初期化

compile ('com.github.florent37:materialviewpager:1.2.0@aar'){ transitive = true }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、MaterialViewPagerをacivity_main.xmlファイルに追加します。

 <com.github.florent37.materialviewpager.MaterialViewPager android:id="@+id/materialViewPager" android:layout_width="match_parent" android:layout_height="match_parent" app:viewpager_logo="@layout/header_logo" app:viewpager_logoMarginTop="100dp" app:viewpager_color="@color/colorPrimary" app:viewpager_headerHeight="200dp" app:viewpager_headerAlpha="1.0" app:viewpager_hideLogoWithFade="false" app:viewpager_hideToolbarAndTitle="true" app:viewpager_enableToolbarElevation="true" app:viewpager_parallaxHeaderFactor="1.5" app:viewpager_headerAdditionalHeight="20dp" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

開発者はいくつかの設定を追加しており、必要に応じてインターフェイスをカスタマイズできます。 以下にそれらの例をいくつか示しますが、残りについては、試行錯誤によって他のものを見ることができます。



-ヘッダー画像の背景音の透明度。

 app:viewpager_headerAlpha="0.6"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-スクロール中に非表示ツールバーをオンまたはオフにします。









-スクロール中にプロットを非表示にするアニメーション

 app:viewpager_hideLogoWithFade="true"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Header_Logo

ヘッダー画像のフレームは、次のように作成するか、別の方法で作成できます。



レイアウト/ header_logo.xml

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/headerLogo" android:layout_width="80dp" android:layout_height="80dp" android:background="@drawable/circle"> <ImageView android:id="@+id/headerLogoContent" android:layout_width="40dp" android:layout_height="40dp" tools:src="@drawable/tennis" android:layout_gravity="center"/> </FrameLayout>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スタイル



もちろん、MaterialViewPagerを正しく表示するために必要なパラメーターを設定する必要があるファイルを忘れてはなりません。 実際、ここではActionBarを削除する必要があります。これは、単に必要に応じて見た目が美しくないためです。

 <resources xmlns:tools="http://schemas.android.com/tools"> <style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light"> </style> <!-- Base application theme. --> <style name="AppTheme" parent="AppBaseTheme"> <item name="android:textColorPrimary">@android:color/white</item> <item name="drawerArrowStyle">@style/DrawerArrowStyle</item> <item name="android:windowTranslucentStatus" tools:targetApi="21">true</item> <item name="android:windowContentOverlay">@null</item> <item name="windowActionBar">false</item> <!-- Toolbar Theme / Apply white arrow --> <item name="colorControlNormal">@android:color/white</item> <item name="actionBarTheme">@style/AppTheme.ActionBarTheme</item> <!-- Material Theme --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/accent_color</item> <item name="android:statusBarColor" tools:targetApi="21">@color/statusBarColor</item> <item name="android:navigationBarColor" tools:targetApi="21">@color/navigationBarColor</item> <item name="android:windowDrawsSystemBarBackgrounds" tools:targetApi="21">true</item> </style> <style name="AppTheme.ActionBarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar"> <!-- White arrow --> <item name="colorControlNormal">@android:color/white</item> </style> <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle"> <item name="spinBars">true</item> <item name="color">@color/drawerArrowColor</item> </style> </resources>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

色



さらに、colors.xmlの別のファイル。 ここでは、名声のためにプレイし、アプリケーションの個性を作成できます。

 <?xml version="1.0" encoding="utf-8"?> <resources> <color name="blue">#303F9F</color> <color name="green">#4CAF50</color> <color name="purple">#673AB7</color> <color name="cyan">#00BCD4</color> <color name="orange">#e95609</color> <color name="accent_color">@color/blue</color> <color name="colorPrimary">@color/blue</color> <color name="colorPrimaryDark">@color/blue</color> <color name="statusBarColor">@color/blue</color> <color name="navigationBarColor">@android:color/black</color> <color name="drawerArrowColor">@android:color/white</color> </resources>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

充填



セクションに正確に記入するかどうかはあなた次第ですが、RecyclerViewとCardViewの例を示します。XMLを作成し、空のCardViewで記入します。



fragment_recyclerview.xml

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

レイアウト/ list_item_card.xml

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="200dp" app:cardCornerRadius="2dp" app:cardElevation="2dp" android:layout_marginBottom="@dimen/cardMarginVertical" android:layout_marginLeft="@dimen/cardMarginHorizontal" android:layout_marginRight="@dimen/cardMarginHorizontal" android:layout_marginTop="@dimen/cardMarginVertical" app:cardPreventCornerOverlap="false" app:contentPadding="0dp"/> </FrameLayout>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ページが作成され、RecyclerViewFragment.javaのコードを記述します。 チュートリアルから理解したように、これはFragment ViewPagerであり、RecyclerViewが必要な次のフラグメントを指定します。 このファイルでは、コンテンツをダウンロードし、RecyclerViewにさらに転送するために必要なすべての機能を設定できます。 最初はすべてが出血しているように見えますが、RecyclerViewですでに他の記事を読んでいる場合は、すべて簡単に見ることができます。

 public class RecyclerViewFragment extends Fragment { private RecyclerView mRecyclerView; private RecyclerView.Adapter mAdapter; public static RecyclerViewFragment newInstance() { return new RecyclerViewFragment(); } @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_recyclerview, container, false); } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); mRecyclerView = (RecyclerView) view.findViewById(R.id.recyclerView); //permet un affichage sous forme liste verticale RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getActivity()); mRecyclerView.setLayoutManager(layoutManager); mRecyclerView.setHasFixedSize(true); //100 faux contenu List<Object> mContentItems = new ArrayList<>(); for (int i = 0; i < 100; ++i) mContentItems.add(new Object()); //penser à passer notre Adapter (ici : TestRecyclerViewAdapter) à un RecyclerViewMaterialAdapter mAdapter = new RecyclerViewMaterialAdapter(new TestRecyclerViewAdapter(mContentItems)); mRecyclerView.setAdapter(mAdapter); //notifier le MaterialViewPager qu'on va utiliser une RecyclerView MaterialViewPagerHelper.registerRecyclerView(getActivity(), mRecyclerView, null); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ファイルを作成し、RecyclerViewを含めるだけで、onBindViewHolderを操作しますが、空のCardViewがあるため、何も追加しません。

 public class TestRecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { List<Object> contents; public TestRecyclerViewAdapter(List<Object> contents) { this.contents = contents; } @Override public int getItemCount() { return contents.size(); } @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()) .inflate(R.layout.list_item_card, parent, false); return new RecyclerView.ViewHolder(view) { }; } @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次はMainActivity設定です。 ここでは、ページ数、タイトル、各ページのヘッダー画像、ヘッダー全体の背景熟成とその色を設定します。

 public class MainActivity extends ActionBarActivity { MaterialViewPager materialViewPager; View headerLogo; ImageView headerLogoContent; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //  final int tabCount = 4; //      @layout/header_logo headerLogo = findViewById(R.id.headerLogo); headerLogoContent = (ImageView) findViewById(R.id.headerLogoContent); //le MaterialViewPager this.materialViewPager = (MaterialViewPager) findViewById(R.id.materialViewPager); //remplir le ViewPager this.materialViewPager.getViewPager().setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { //je créé pour chaque onglet un RecyclerViewFragment return RecyclerViewFragment.newInstance(); } @Override public int getCount() { return tabCount; } //   @Override public CharSequence getPageTitle(int position) { switch (position) { case 0: return getResources().getString(R.string.divertissement); case 1: return getResources().getString(R.string.sports); case 2: return getResources().getString(R.string.technologie); case 3: return getResources().getString(R.string.international); default: return "Page " + position; } } }); //               this.materialViewPager.getViewPager().setOffscreenPageLimit(tabCount); //relie les tabs au viewpager this.materialViewPager.getPagerTitleStrip().setViewPager(this.materialViewPager.getViewPager()); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、このインターフェイスを使用するために知っておく必要があることはすべてです。











ご清聴ありがとうございました！