| Главная » Создаем собственный YouTube клиент | |
В этом уроке будет рассмотрено, как создать свой собственный YouTube клиент, который будет иметь такие возможности, как поиск и воспроизведение видео с популярного ресурса YouTube. Вместе с этим, мы научимся использовать такие библиотеки, как YouTube Android Player API иthe YouTube Data API. Перед началом работы над этим уроком нужно получить ключ разработчика, который даст возможность использовать YouTube API. Его можно получить здесь. Создаем новый проект, выбираем минимальную версию для запуска приложения Android 2.2, создаем Blank Activity и жмем Финиш. Прежде всего нужно добавить необходимые библиотеки. Нам понадобятся следующие: - YouTube Android Player API - эта библиотека позволяет без особых трудностей добавлять и контролировать поведение видео в приложение. Ее можно загрузить отсюда; - YouTube Data API - эта библиотека дает возможность запрашивать приложению информацию с YouTube. Использование этой библиотеки нужно для того, чтобы разрешить нашему приложению искать видео на YouTube. Дружно качаем эту библиотеку здесь; - Picasso - уже хорошо известная читателям этого сайта библиотека (вот урок по ее использованию) которая необходима для удобной работы с изображениями с сети Интернет. Мы используем ее для того, чтобы создавать для "preview" картинки для видео. В ссылке на урок по Picasso есть адрес на его загрузку. После загрузки необходимых файлов, распаковываем архивы библиотек и добавляем их в библиотеки приложения. Необходимо в папку libs приложения добавить следующие файлы: - google-api-services-youtube-v3-rev124-1.19.0.jar; Таким же образом добавляем и Picasso. Конечно можно добавить библиотеки и другим способом. В приложении нам понадобится всего одно разрешение - на использование Интернет. Открываем файл AndroidManifest.xml и добавляем туда необходимое разрешение:
<uses-permission android:name="android.permission.INTERNET"/>
Приложение будет иметь 2 Activity, в одном будет происходить поиск видео, а в другом его воспроизведение. Для того, чтобы избежать возни с настройкой ориентации (альбомная/портретная) для приложения, мы сразу сделаем обе активности альбомными. Для этого в том же файле AndroidManifest.xml добавим:
<activity android:name=".SearchActivity"
android:screenOrientation="landscape">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<activity android:name=".PlayerActivity"
android:screenOrientation="landscape" />
Переходим к редактированию файла strings.xml. Нам нужно добавить сюда такие строки:
<resources>
<string name="app_name">SimplePlayer</string>
<string name="search">Search</string>
<string name="failed">Failed to initialize Youtube Player</string>
</resources>
Теперь примемся за создание layout файла для активности с поиском видео. В нем будут использоваться такие элементы: - EditText - сюда пользователи будут вводить название видео для поиска; - ListView - список для отображения результатов поиска; - LinearLayout - этот вид будет использоваться как родительский для двух вышеупомянутых. Создаем новый файл layout/activity_search.xml и добавляем туда следующий код:
<?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" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/search"
android:id="@+id/search_input"
android:singleLine="true"
/>
<ListView
android:id="@+id/videos_found"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="5dp"
/>
</LinearLayout>
Теперь создадим layout файл, в котором будет отображаться информация об каком либо выбранном из списка найденных видео. Следовательно, нам нужно будет использовать следующие элементы: - ImageView - для отображения картинки видео; - TextView - для показа названия видео; - TextView - для показа описания видео; - RelativeLayout - используется как родительский элемент для вышеупомянутых. Создаем файл с именем layout/video_item.xml и добавляем туда следующий код:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
>
<ImageView
android:id="@+id/video_thumbnail"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="20dp"
/>
<TextView android:id="@+id/video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/video_thumbnail"
android:layout_alignParentTop="true"
android:layout_marginTop="5dp"
android:textSize="25sp"
android:textStyle="bold"
/>
<TextView android:id="@+id/video_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/video_thumbnail"
android:layout_below="@+id/video_title"
android:textSize="15sp"
/>
</RelativeLayout>
Далее создаем layout для активности в которой будет воспроизводиться видео. Он будет состоять из: - YouTubePlayerView - для проигрывания видео с YouTube; - LinearLayout - родитель для YouTubePlayerView. Создаем файл по имени layout/activity_player.xml и добавляем в него следующий код:
<?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" >
<com.google.android.youtube.player.YouTubePlayerView
android:id="@+id/player_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
Создаем новый java класс по имени VideoItem.java. Он будет использоваться для хранения такой информации о видео: - YouTube ID; - Title; - Description; - Thumbnail URL. Вся эта информация будет храниться в виде строковых ресурсов. После добавления необходимых настроек, класс VideoItem.java должен выглядеть следующим образом:
public class VideoItem {
private String title;
private String description;
private String thumbnailURL;
private String id;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getThumbnailURL() {
return thumbnailURL;
}
public void setThumbnailURL(String thumbnail) {
this.thumbnailURL = thumbnail;
}
}
Необходимо создать еще один класс, который будет вспомогательным и позволит избежать работы над YouTube Data API прямо в нашем activity. Назовем его YoutubeConnector.java, он будет содержать следующее: - YouTube класс, который будет использоваться для взаимодействия с YouTube API; - YouTube.Search.List, необходимый для представления поискового запроса. Вышеуказанные переменные мы инициализируем в конструкторе. Будет также инициализирован метод search, используемый для создания поискового запроса. Метод list используется для того, чтобы указать, какие детали результатов поиска мы хотим увидеть. Мы будем использовать id и snippet команды, которые помогут нам получить: - id/Id; - snippet/title; - snippet/description; - snippet/thumbnails/default/url. Эти команды используются каждый раз, когда пользователь делает запрос. На этом этапе работы, код класса YoutubeConnector.java должен выглядеть так:
public class YoutubeConnector {
private YouTube youtube;
private YouTube.Search.List query;
// Сюда нужно ввести свой ключ разработчика
public static final String KEY
= "AIzaSQZZQWQQWMGziK9H_qRxz8g-V6eDL3QW_Us";
public YoutubeConnector(Context context) {
youtube = new YouTube.Builder(new NetHttpTransport(),
new JacksonFactory(), new HttpRequestInitializer() {
@Override
public void initialize(HttpRequest hr) throws IOException {}
}).setApplicationName(content.getString(R.string.app_name)).build();
try{
query = youtube.search().list("id,snippet");
query.setKey(KEY);
query.setType("video");
query.setFields("items(id/videoId,snippet/title,snippet/description,snippet/thumbnails/default/url)");
}catch(IOException e){
Log.d("YC", "Could not initialize: "+e);
}
}
}
Далее мы создаем метод по имени search, для выполнения поиска по введенному пользователем ключевому слову. Этот метод принимает ключевое слово, как параметр String. Query метод используется для настройки ключевых слов. Далее мы запускаем запрос, используя метод execute. Результат поиска будет передан в форму SearchListResponse. Метод search должен выглядеть примерно так:
public List<VideoItem> search(String keywords){
query.setQ(keywords);
try{
SearchListResponse response = query.execute();
List<SearchResult> results = response.getItems();
List<VideoItem> items = new ArrayList<VideoItem>();
for(SearchResult result:results){
VideoItem item = new VideoItem();
item.setTitle(result.getSnippet().getTitle());
item.setDescription(result.getSnippet().getDescription());
item.setThumbnailURL(result.getSnippet().getThumbnails().getDefault().getUrl());
item.setId(result.getId().getVideoId());
items.add(item);
}
return items;
}catch(IOException e){
Log.d("YC", "Could not search: "+e);
return null;
}
}
Теперь создаем класс SearchActivity.java. В этом классе будут поля, которые мы упоминали в activity_search.xml. Также будет использоваться Handler для обновления пользовательского интерфейса. В методе onCreate инициализируем необходимые элементы, добавляем OnEditorActionListener в EditText, для того чтобы определить, когда пользователь прекратил ввод поискового запроса (ключевого слова):
public class SearchActivity extends Activity {
private EditText searchInput;
private ListView videosFound;
private Handler handler;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_search);
searchInput = (EditText)findViewById(R.id.search_input);
videosFound = (ListView)findViewById(R.id.videos_found);
handler = new Handler();
searchInput.setOnEditorActionListener(new TextView.OnEditorActionListener() {
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
if(actionId == EditorInfo.IME_ACTION_DONE){
searchOnYoutube(v.getText().toString());
return false;
}
return true;
}
});
}
}
Обратите внимание на вызов метода searchOnYoutube. Определим этот метод. В этом методе мы создаем Thread для инициализации YoutubeConnector и запуска метода seach. Когда результаты поиска станут известны, Handler обновит пользовательский интерфейс. Код метода searchOnYoutube:
private List<VideoItem> searchResults;
private void searchOnYoutube(final String keywords){
new Thread(){
public void run(){
YoutubeConnector yc = new YoutubeConnector(SearchActivity.this);
searchResults = yc.search(keywords);
handler.post(new Runnable(){
public void run(){
updateVideosFound();
}
});
}
}.start();
}
В методе updateVideosFound мы создаем ArrayAdapter и связываем его с ListView для отображения результатов поиска. В методу getView адаптера, мы наполняем video_item.xml и обновляем в нем информацию о результатах поиска. Метод load библиотеки Picasso используется для настройки картинки видео (до того, как мы запускаем видео мы смотрим на его картинку, при нажатии на которую начинает проигрываться видео, вот это я и назвал картинка видео) и метод into для связи картинки с элементом ImageView:
private void updateVideosFound(){
ArrayAdapter<VideoItem> adapter = new ArrayAdapter<VideoItem>(getApplicationContext(), R.layout.video_item, searchResults){
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if(convertView == null){
convertView = getLayoutInflater().inflate(R.layout.video_item, parent, false);
}
ImageView thumbnail = (ImageView)convertView.findViewById(R.id.video_thumbnail);
TextView title = (TextView)convertView.findViewById(R.id.video_title);
TextView description = (TextView)convertView.findViewById(R.id.video_description);
VideoItem searchResult = searchResults.get(position);
Picasso.with(getApplicationContext()).load(searchResult.getThumbnailURL()).into(thumbnail);
title.setText(searchResult.getTitle());
description.setText(searchResult.getDescription());
return convertView;
}
};
videosFound.setAdapter(adapter);
}
Наконец, нам нужно добавить метод, настраивающий OnItemClickListener для ListView, который будет запускать видео при нажатии на него в списке из доступных видео после поиска по запросу. Назовем метод addClickListener и вызовем его в конце метода onCreate. После того, как мы нажали на определенное видео, нужно организовать передачу его ID на PlayerActivity и запуск воспроизведения видео:
private void addClickListener(){
videosFound.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> av, View v, int pos,
long id) {
Intent intent = new Intent(getApplicationContext(), PlayerActivity.class);
intent.putExtra("VIDEO_ID", searchResults.get(pos).getId());
startActivity(intent);
}
});
}
Под конец наших трудов осталось создать только это самое Activity для воспроизведения видео. Создаем новый класс PlayerActivity.java, который наследуется от YouTubeBaseActivity. Это важно, потому что только в подклассах YouTubeBaseActivity можно использовать YouTubePlayerView. Это Activity имеет только одну переменную, которая представляет YouTubePlayerView, который мы упоминали при работе над activity_player.xml. Эта переменная инициализирована в методе onCreate. Наш новый класс также должен выполнять OnInitializedListener для того, чтобы знать, когда инициализация завершена. Интерфейс включает в себя два метода: onInitializationFailure и onInitializationSuccess. В случае успеха, метод cueVideo используется для проигрывания YouTube видео. В случае сбоя, Toast показывает пользователю сообщение об ошибке. Файл PlayerActivity.java должен выглядеть так:
public class PlayerActivity extends YouTubeBaseActivity implements OnInitializedListener {
private YouTubePlayerView playerView;
@Override
protected void onCreate(Bundle bundle) {
super.onCreate(bundle);
setContentView(R.layout.activity_player);
playerView = (YouTubePlayerView)findViewById(R.id.player_view);
playerView.initialize(YoutubeConnector.KEY, this);
}
@Override
public void onInitializationFailure(Provider provider,
YouTubeInitializationResult result) {
Toast.makeText(this, getString(R.string.failed), Toast.LENGTH_LONG).show();
}
@Override
public void onInitializationSuccess(Provider provider, YouTubePlayer player,
boolean restored) {
if(!restored){
player.cueVideo(getIntent().getStringExtra("VIDEO_ID"));
}
}
}
Все, приложение готово для тестирования. После тяжелого пути создания этого приложения, надеюсь все почерпнули для себя что то полезное. Удачи! | |
|
| |
| Всего комментариев: 1 | |
| |
