Android 开源代码——滚动导航视图

1、这篇文章是来自 Android Design Patterns: Interaction Design Solutions for Developers 一书中， 这是作者认为将来会流行的一种导航方式

2、废话少说还是先来看看效果:

整个导航是一个可滑动的列表，可以用文字或者图片填充，当然我们可以用这种滑动视图来做成产品展示等都可以，不局限于导航

3、项目源文件已经上传邮箱

4、项目源码

主布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:padding="5dp"
              android:textColor="#505050"
              android:textStyle="bold"
              android:textSize="12sp"
              android:text="@string/KNewArrivals" />

    <!-- Container view to scroll horizontally which gives the carousel effect -->
    <HorizontalScrollView android:layout_width="match_parent"
                          android:layout_height="wrap_content"
                          android:scrollbars="none">

        <!-- Carousel items container - lays out items horizontally -->
        <LinearLayout android:id="@+id/carousel"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:orientation="horizontal"/>

    </HorizontalScrollView>

</LinearLayout>

 

主文件：

public class CarouselDemoActivity extends Activity {

    /**
     * Define the number of items visible when the carousel is first shown.
     */
    private static final float INITIAL_ITEMS_COUNT = 3.5F;

    /**
     * Carousel container layout
     */
    private LinearLayout mCarouselContainer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Set title
        setTitle(R.string.KPetShop);

        // Set content layout
        setContentView(R.layout.activity_carousel_demo);

        // Get reference to carousel container
        mCarouselContainer = (LinearLayout) findViewById(R.id.carousel);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);

        // Compute the width of a carousel item based on the screen width and number of initial items.
        final DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        final int imageWidth = (int) (displayMetrics.widthPixels / INITIAL_ITEMS_COUNT);

        // Get the array of puppy resources
        final TypedArray puppyResourcesTypedArray = getResources().obtainTypedArray(R.array.puppies_array);

        // Populate the carousel with items
        ImageView imageItem;
        for (int i = 0 ; i < puppyResourcesTypedArray.length() ; ++i ) {
            // Create new ImageView
            imageItem = new ImageView(this);

            // Set the shadow background
           imageItem.setBackgroundResource(R.drawable.shadow);

            // Set the image view resource
            imageItem.setImageResource(puppyResourcesTypedArray.getResourceId(i, -1));

            // Set the size of the image view to the previously computed value
            imageItem.setLayoutParams(new LinearLayout.LayoutParams(imageWidth, imageWidth));

            // Add image view to the carousel container
            mCarouselContainer.addView(imageItem);
        }
    }
}

 数组资源文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Array of puppy resource IDs -->
    <array name="puppies_array">
        <item>@drawable/puppy_01</item>
        <item>@drawable/puppy_02</item>
        <item>@drawable/puppy_03</item>
        <item>@drawable/puppy_04</item>
        <item>@drawable/puppy_05</item>
        <item>@drawable/puppy_06</item>
        <item>@drawable/puppy_07</item>
        <item>@drawable/puppy_08</item>
    </array>

</resources>